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INTRODUCTION 


出 版 说 明 


随 着 国家 信息 化 步伐 的 加 快 和 高 等 教育 规模 的 扩大 ,社会 对 计算 机 专业 
人 才 的 需求 不 仅 体现 在 数量 的 增加 上 ,而 且 体 现在 质量 要 求 的 提高 上 ,培养 
具有 研究 和 实践 能 力 的 高 层次 的 计算 机 专业 人 才 已 成 为 许多 重点 大 学 计算 
机 专业 教育 的 主要 目标 。 目 前 ,我 国共 有 16 个 国家 重点 学 科 , 名 个 博士 点 一 
级 学 科 、 台 个 博士 点 二 级 学 科 集 中 在 教育 部 部 属 重点 大 学 ,这 些 高 校 在 计算 
机 教学 和 科研 方面 具有 一 定 优势 ,并 且 大 多 以 国际 著名 大 学 计算 机 教育 为 参 
照 系 ,具有 系统 完善 的 教学 课程 体系 .教学 实验 体系 ,教学 质量 保证 体系 和 人 
才 培 养 评 估 体 系 等 综合 体系 ,形成 了 培养 一 流 人 才 的 教学 和 科研 环境 。 

重点 大 学 计算 机 学 科 的 教学 与 科研 氛围 是 培养 一 流 计算 机 人 才 的 基 
础 ,其 中 专业 教材 的 使 用 和 建设 则 是 这 种 氛围 的 重要 组 成 部 分 ,一 批 具 有 
学 科 方 向 特色 优势 的 计算 机 专业 教材 作为 各 重点 大 学 的 重点 建设 项 目 成 
果 得 到 肯定 。 为 了 展示 和 发 扬 各 重点 大 学 在 计算 机 专业 教育 上 的 优势 , 特 
别 是 专业 教材 建设 上 的 优势 ,同时 配合 各 重点 大 学 的 计算 机 学 科 建 设 和 专 
业 课 程 教学 需要 ,在 教育 部 相关 教学 指导 委员 会 专家 的 建议 和 各 重点 大 学 
的 大 力 支持 下 ,清华 大 学 出 版 社 规划 并 出 版 本 系列 教材 。 本 系列 教材 的 建 
设 旨 在 “汇聚 学 科 精 英 、 引 领 学 科 建设 .培育 专业 英才 ”, 同 时 以 教材 示范 各 
重点 大 学 的 优秀 教学 理念 ,教学 方法 教学 手段 和 教学 内 容 等 。 

本 系列 教材 在 规划 过 程 中 体现 了 如 下 一 些 基本 组 织 原则 和 特点 。 

(1) 面向 学 科 发 展 的 前 沿 , 适 应 当前 社会 对 计算 机 专业 高 级 人 才 的 培养 
需求 。 教 材 内 容 以 基本 理论 为 基础 ,反映 基本 理论 和 原理 的 综合 应 用 ,重视 
实践 和 应 用 环节 。 

(2 反映 教学 需要 ,促进 教学 发 展 。 教 材 要 能 适应 多 样 化 的 教学 需要 , 正 
确 把 握 教 学 内 容 和 课程 体系 的 改革 方向 。 在 选择 教材 内 容 和 编写 体系 时 注 
意 体现 素质 教育 、 创 新 能 力 与 实践 能 力 的 培养 ,为 学 生 知 识 、 能 力 . 素 质 协调 
发 展 创造 条 件 。 

(3 实施 精品 战略 ,突出 重点 ,保证 质量 。 规 划 教材 建设 的 重点 依然 是 专 
业 基础 课 和 专业 主干 课 ; 特别 注意 选择 并 安排 了 一 部 分 原来 基础 比较 好 的 优 
秀 教材 或 讲义 修订 再 版 ,逐步 形成 精品 教材 ; 提倡 并 鼓励 编写 体现 重点 大 学 


I 
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计算 机 专业 教学 内 容 和 课程 体系 改革 成 果 的 教材 。 

(有 主张 一 纲 多 本 ,合理 配套 。 专 业 基础 课 和 专业 主干 课 教材 要 配套 ,同一 门 课程 可 以 
有 多 本 具有 不 同 内 容 特点 的 教材 。 处 理 好 教材 统一 性 与 多 样 化 的 关系 ; 基本 教材 与 辅助 教 
材 以 及 教学 参考 书 的 关系 ; 文字 教材 与 软件 教材 的 关系 ,实现 教材 系列 资源 配套 。 

(9 依靠 专家 ,择优 落实 。 在 制订 教材 规划 时 要 依靠 各 课程 专家 在 调查 研究 本 课程 教 
材 建设 现状 的 基础 上 提出 规划 选 题 。 在 落实 主编 人 选 时 ,要 引入 竞争 机 制 , 通 过 申报 、 评 审 
确定 主编 。 书 稿 完 成 后 要 认真 实行 审 稿 程序 ,确保 出 书 质量 。 

繁荣 教材 出 版 事业 ,提高 教材 质量 的 关键 是 教师 。 建 立 一 支 高 水 平 的 以 老 带 新 的 教材 
编写 队伍 才能 保证 教材 的 编写 质量 ,希望 有 志 于 教材 建设 的 教师 能 够 加 入 到 我 们 的 编写 队 
伍 中 来 。 


教材 编 委 会 
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随 着 互联 网 的 不 断 发 展 ,目前 的 应 用 软件 系统 大 多 从 原来 的 基于 客户 
机 /服务 器 的 模式 转向 系统 升级 容易 、 维 护 方便 、 使 用 简单 的 基于 浏览 器 / 服 
务 器 的 应 用 模式 。 在 这 样 的 应 用 背景 下 ,相应 的 Web 开 发 技术 也 不 断 成 熟 和 
完善 。Wb 开 发 技术 不 断 改变 着 现今 信息 处 理 的 面貌 ,对 信息 技术 领域 的 发 
展 起 着 重要 作用 ,但 Wb 开发 技术 涉及 HM、 CSS、XML、 JavaScript、 Web Servioe、 Ajax、 
Siverligt 等 众多 技术 ,而 且 这 些 技术 还 在 不 断 升级 、 完 善之 中 。 很 多 初学 者 对 
开发 籽 应 用 软件 很 感 兴趣 ,但 对 如 何 着 手 进 行 Wb 应 用 程序 的 开发 ,感觉 不 
知 从 何 处 下 手 ,较为 茫然 。 
目前 ,Web 开发 和 应 用 方面 的 技术 书籍 相当 多 ,包括 HML 教 程 \.ASP 开发 、 
JavaScript 教程 .APNET 应 用 开发 、 网 页 制作 教程 .C55 教程 .ML 教程 .JP 开发 .PP 
开发 等 。 这 些 出 版 的 书籍 要 么 比较 肤浅 ,学 生 学 习 后 只 了 解 一 些 基 本 概念 ， 
动手 能 力 提高 不 大 ;要 么 过 于 专业 ,学 生 学 习 后 在 某 些 方面 具有 一 定 的 知识 
和 动手 能 力 , 但 对 Web 开发 没有 全 面 和 系统 的 认识 ;要 么 过 于 高 级 ,对 于 基础 
欠缺 的 学 生 学 习 起 来 非常 费劲 ,只 能 束之高阁 。 从 中 较 难 找到 一 种 让 具有 一 
定 面向 对 象 编程 基础 .学习 过 数据 库 知识 的 读者 在 Wb 开发 方面 从 入 门 变 成 
开发 能 手 的 教材 。 

针对 上 述 需 求 , 本 书 作者 于 2007 年 12 月 完成 《Web 开发 技术 及 其 应 用 ) 一 
书 , 该 书 出 版 后 已 发 行 1 万 多 册 ,在 较 多 高 校 使 用 。 随 着 软件 技术 ,包括 Web 
开发 平台 和 Wb 开发 新 技术 的 不 断 发 展 , 原 书 中 的 部 分 内 容 已 不 适合 当今 技 
术 发 展 需求 ,本 书 将 原来 的 Visual Studio 206 开 发 环境 改 为 Visual Studio 2010 开 发 
环境 ,增加 了 jQuery 开发 框架 、LNQ、Siverlight 等 新 的 Wb 开发 技术 的 内 容 ,并 对 
原 书 的 部 分 内 容重 新 改写 ,以 适合 新 的 知识 学 习 需 求 。 

虽然 uaa 外 和 ET 这 两 类 Wb 开发 平台 各 占据 半壁 江山 ,但 对 初学 者 来 说 
易学 好 用 的 Web 开发 工具 是 理解 和 掌握 Web 开发 技术 的 最 好 武器 ,而 微软 公司 
的 Visual Studio 010 开 发 工具 就 是 其 中 的 佼佼 者 ,因此 本 书 选择 .ET 平台 作为 本 
书 的 教学 案例 演练 平台 ,但 Web 开发 方面 的 很 多 技术 思想 是 相通 的 , 仍 可 延伸 
到 Java 三 平台 。 

本 书 章 节 遵循 “Web 基本 概念 一 Web 开发 环境 的 建立 ~ HIM 网 页 制作 技术 


一 GS~[HM-~XM-~JET40 届 应 用 程序 开发 技术 一 Apbx 和 Siverlight 4 程序 设计 技术 一 网 站 规划 
建设 与 安全 性 ”这 样 的 一 条 线索 来 安排 ,每 一 章节 安排 了 大 量 例题 来 提高 读者 的 逐步 应 用 能 
力 , 使 读者 由 浅 入 深 地 全 面 掌握 Web 开发 的 各 个 知识 点 和 环节 。 

笔者 结合 在 软件 学 院 进行 Web 开发 技术 课程 教学 的 经 验 和 多 年 实际 Wb 项 目 开发 应 用 
的 经 验 写作 本 书 , 在 编写 时 充分 考虑 了 各 个 层次 的 学 习 需 求 。 与 国内 同类 图 书 相 比 ,本 书 内 
容 更 为 丰富 和 完整 ,举例 典型 ,力图 通俗 易 懂 , 讲 究 实 效 , 理 论 与 实践 并 重 ,将 本 书 某 些 内 容 
作 取 售后 既 适 合 专科 和 本 科 的 课程 教学 要 求 , 又 适合 研究 生 的 课程 教学 要 求 。 另 外 ,本 书 还 
可 作为 对 Wb 开发 技术 感 兴趣 的 初学 者 自我 学 习 的 参考 用 书 。 对 于 具备 计算 机 网 络 基 础 、 
数据 库 原理 、 多 媒体 基础 .互联 网 基础 的 WW 开发 爱好 者 ,相信 通过 本 书 的 学 习 一 定 会 使 处 
于 茫然 中 的 你 找到 一 条 快速 掌握 Web 开 发 技术 ,并 进行 应 用 开发 的 捷径 。 

在 本 书 编写 过 程 中 ,得 到 了 重庆 大 学 软件 学 院 熊 庆 宇 教授 和 文俊 浩 教授 等 领导 的 热情 
关心 和 支持 。 参 与 本 书 编写 工作 的 有 重庆 大 学 软件 学 院 王 成 良 、 祝 伟 华 、 柳 玲 、 吴 映 波 、 徐 玲 
老师 等 , 王 成 良 教授 对 本 书 进行 了 统 稿 和 编排 。 另 外 , 欧 亚 男 、 蒋 超 等 参加 了 本 书 的 程序 调 
试 和 排版 工作 。 

在 本 书 的 编写 过 程 中 参考 了 许多 相关 书籍 和 资料 ,已 在 书后 列 出 ,在 此 对 这 些 参考 文献 
的 作者 表示 感谢 ,同时 感谢 清华 大 学 出 版 社 对 本 书 出 版 所 给 予 的 支持 和 帮助 。 

本 书 的 配套 课件 等 相关 资源 可 以 从 清华 大 学 出 版 社 网 站 wwtup.coma 下载 ,如 果 在 课件 
的 下 载 使 用 中 遇 到 问题 ,请 发 邮件 至 :fuhy@ tuptsinghuaeduan。 

由 于 笔者 水 平 有 限 ,错误 和 不 妥 之 处 在 所 难免 , 敬 请 读者 不 音 赐教 。 如 果 读 者 在 本 书 的 
使 用 中 有 任何 意见 和 建议 ,请 发 邮件 至 :fuhy@ tuptsingnuaeducn。 


编 者 
2013 年 5 月 
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学 习 要 点 

(1) 掌握 Web 的 基本 概念 和 基础 知识 。 
(2) 熟悉 C/S 模式 与 B/S 模式 的 结构 。 
(3) 了 解 常用 的 Web 开发 工具 。 

(4) 了 解 Web 开发 的 基本 技术 。 

(5) 了 解 Web 的 发 展 历程 。 


互联 网 的 快速 发 展 给 和 人们 的 工作 、 学 习 和 生活 带 来 了 重大 影响 。 人 们 利 
用 互联 网 的 主要 方式 就 是 通过 浏览 器 访问 网 站 ,以 处 理 数 据 、 获 取信 息 。 在 
人 们 通过 浏览 器 打开 各 式 各 样 的 网 站 进行 信息 处 理 . 享 受 互联 网 带 给 人 们 巨 
大 便利 的 同时 ,好 奇 的 读者 也 许 非常 想 知道 其 背后 隐藏 的 所 有 实现 技术 。 互 
联网 应 用 涉及 的 技术 是 多 方面 的 ,包括 网 络 技术 、 数 据 库 技术 、` 面 向 对 象 技 
术 、 图 形 图 像 处 理 技术 .多 媒体 技术 网络 和 信息 安全 技术 .因特网 技术 .Web 
开发 技术 等 。 其 中 Web 开发 技术 是 互联 网 应 用 中 最 为 关键 的 技术 之 一 。 

Web 开发 技术 不 断 改变 着 现今 信息 处 理 的 面貌 ,对 信息 技术 领域 的 发 展 
起 着 重要 作用 ,其 中 所 包含 的 内 容 非 常 广泛 ,涉及 HTML、DHTML、XML、 
XSLT.CSS.ADO/ADO. NET.ASP/ASP. NET.CGI.JSP.PHP JavaScript、 
Web Service、Ajax、. NET、Java EE 等 许多 内 容 。 初 学 者 对 Web 应 用 软件 的 
开发 很 感 兴趣 ,但 往往 不 知道 从 何 下 手 。 通 过 本 章 的 学 习 , 读 者 可 以 全 面 了 
解 开发 Web 应 用 系统 需要 掌握 的 一 些 概念 和 基础 知识 ,为 后 续 进 一 步 学 习 
Web 应 用 开发 打下 基础 。 


1.1 Web 技术 基础 知识 


1.1.1 关于 Web 


Internet 互联 网 的 中 文 译名 为 因特网 ,是 网 络 与 网 络 之 间 所 串联 成 的 庞 
大 网 络 , 这 些 网 络 以 一 组 通用 的 协议 相连 ,形成 逮 辑 上 的 单一 巨大 国际 网 络 。 


= 


这 种 将 计算 机 网 络 互相 联接 在 一 起 的 方法 可 称 作 “ 网 络 互联 ”在 这 基础 上 发 展 出 覆盖 全 世界 
的 全 球 性 互联 网 络 称 “ 互 联网 ”, 即 “互相 连接 在 一 起 的 网 络 ”。 一 台 Internet 上 的 计算 机 ,不 管 
它 是 PC, 还 是 Linux、UNIX 工作 站 ,不 管 它 是 以 什么 方式 连 入 Internet, 任 何人 都 可 以 访问 到 
它 , 实 际 上 ,人 们 可 以 访问 处 于 Internet 上 任何 位 置 的 Web 站 点 。 那 么 ,究竟 什么 是 Web 呢 ? 

Web 的 英文 全 称 为 World Wide Web, 缩 写 为 WWW, 译 为 “万 维 网 ”, 是 一 个 可 通过 互 
联网 来 访问 的 、 由 许多 互相 链接 的 超 文本 组 成 的 系统 。 在 这 个 系统 中 ,可 通过 URI 
(Uniform Resource Identifier, 统 一 资源 标识 符 ) 来 访问 各 种 资源 ,这 些 资源 通过 超 文本 传 
输 协 议 (HyperText Transfer Protocol, HTTP) 传 送 给 用 户 , 可 通过 点 击 链接 来 获得 资源 。 
Web 并 不 等 同 于 Internet, 它 只 是 Internet 提供 的 服务 之 一 ,是 靠 着 Internet 运行 的 一 项 服 
务 ,一 般 通过 浏览 器 来 实现 用 户 与 Internet 的 交互 。 

在 Internet 中 分 布 着 成 千 上 万 台 计 算 机 ,这 些 计 算 机 扮演 的 角色 和 所 起 的 作用 各 不 相 
同 。 有 的 计算 机 负责 收发 电子 邮件 ,有 的 负责 为 用 户 传输 文件 ,有 的 负责 对 域名 进行 解析 ， 
更 多 的 计算 机 则 用 于 组 织 并 展示 相关 的 信息 资源 ,方便 用 户 的 获取 。 所 有 这 些 承 担 服务 任 
务 的 计算 机 统称 为 服务 器 ,根据 服务 的 特点 ,又 可 分 为 邮件 服务 器 \ 文 件 传输 服务 器 ,域名 服 
务 器 (Domain Name System,DNS) 和 Web 服务 器 等 。 


1.1.2 什么 是 Web 服务 器 


Web 服务 器 又 称 WWW 服务 器 、 网 站 服务 器 或 站 点 服务 器 ,就 是 将 本 地 的 信息 用 超 文 
本 (Hypertext) 组 织 ,为 用 户 在 Internet 上 搜索 和 浏览 信息 提供 服务 。 从 本 质 上 来 说 , Web 
服务 器 实际 上 就 是 一 个 软件 系统 。 一 台 计 算 机 可 以 充当 多 个 Web 服务 器 。 为 提高 用 户 的 
访问 效率 ,一 般 情况 下 一 台 计 算 机 只 充当 一 个 Web 服务 器 ; 为 提供 大 量 用 户 的 访问 ,多 台 
计算 机 可 以 形成 集群 ,只 提供 一 个 Web 服务 。 通 常 将 只 充当 一 个 Web 服务 器 的 一 台 计算 
机 就 叫做 Web 服务 器 。 

因此 ,Web 或 者 说 万 维 网 是 由 Internet 中 称 为 Web 服务 器 的 计算 机 所 组 成 的 ,由 那些 
希望 通过 Internet 发 布 信息 的 机 构 提 供 并 管理 。 可 以 这 样 说 ,万 维 网 是 Internet 的 一 个 子 
集 , 即 : WWW 包含 于 Internet。 在 Web 世界 里 ,每 一 个 Web 服务 器 除了 提供 自己 独特 的 
信息 服务 外 ,还 可 以 用 超 链接 (Hyperlink) 指 向 其 他 Web 服务 器 ,而 这 些 Web 服务 器 又 可 
以 指向 更 多 的 Web 服务 器 ,这 样 , 一 个 全 球 范围 的 .由 Web 服务 器 组 成 的 万 维 网 就 形成 了 。 

要 使 一 台 计 算 机 成 为 一 台 Web 服务 器 ,必须 安装 UNIX、Linux 或 Windows 2003/2008 
Server 等 网 络 操 作 系 统 , 并 且 还 要 安装 专门 的 信息 服务 器 程序 ,如 Windows 2008 Server 中 
的 IIS7.0 或 Apache Tomcat 等 。 


1.1.3 什么 是 Web 页 面 


Web 是 互联 网 提供 信息 的 一 种 手段 。 通 过 这 种 手段 ,能 够 实现 以 Web 页 面 为 单位 管 
理 庞大 的 信息 及 其 之 间 的 联系 ,并 对 其 进行 无 缝 检索。 那么 ,什么 是 Web 页 面 呢 ? Web 在 
提供 信息 服务 之 前 ,所 有 信息 都 必须 以 文件 方式 事先 存放 在 Web 服务 器 所 管辖 磁盘 中 某 个 
文件 夹 下 ,其 中 包含 了 由 超 文本 标记 语言 (HyperText Markup Language,HTML) 组 成 的 文 
本 文件 ,这些 文 本 文件 称 为 超 链接 文件 ,又 称 网 页 文件 或 Web 页 面 文件 (Web page) 。 

当 用 户 通过 浏览 器 在 地 址 栏 输入 访问 网 站 的 网 址 时 ,实际 上 就 是 向 某 个 Web 服务 器 发 
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出 调用 某 个 页 面 的 请 求 。Web 服务 器 收 到 页 面 调用 请 求 后 ,从 磁盘 中 调 出 该 网 页 ,进行 相 
关 处 理 后 传 回 给 浏览 器 显示 。 在 这 里 , Web 服务 器 作为 一 个 软件 系统 ,用 于 管理 Web 页 
面 ,并 使 这 些 页 面 通过 本 地 网 络 或 Internet 供 客户 浏览 器 使 用 。 图 1-1 展示 了 Web 服务 器 
与 Web 页 面 的 关系 。 


| < 网 页 |] 其 他 文件 | | 
| i 主 目录 = l : 
© (Home Directory) 文件 夹 1 网 页 | 

服务 器 Se Le | | 
| 一 一 4 _| 其 他 文件 | 
| | 
| 


1-1 Web 服务 器 与 Web 页面 的 关系 


实际 上 一 个 简单 的 网 站 就 是 由 一 个 个 网 页 文件 以 及 图 片 文 件 、 音 频 文件 及 其 他 辅助 文 
件 组 成 的 ,每 一 个 网 页 中 包含 了 各 种 图 片 . 声 音 和 动画 文件 等 的 链接 地 址 ,它们 存放 在 Web 
服务 器 的 某 个 主 目录 下 ,Web 服务 器 对 主 目录 及 其 下 属 的 各 个 文件 夹 和 所 有 文件 进行 管理 
和 控制 ,例如 可 以 控制 某 个 文件 夹 或 网 页 文件 的 读 、 写 等 权限 。Web 页 面 文件 由 超 文本 标 
记 语 言 构 成 ,文件 扩展 名 通常 为 HTM 或 HTML, 但 本 章 后 面 介绍 的 ASP、ASPX、JSP、 
PHP 等 文件 也 属于 Web 页 面 ,但 它们 有 另外 一 个 名 称 即 Web 服务 器 页 面 。Web 服务 器 页 
面 需要 Web 服务 器 对 它们 进行 重新 处 理 后 ,动态 生成 新 的 HTML 页 面 再 传送 给 客户 端 供 
用 户 浏览 。 


1.1.4 统一 资源 定位 符 


信息 资源 放 在 Web 服务 器 之 后 ,需要 将 它 的 地 址 告诉 给 用 户 ,以 便 让 用 户 来 访问 ,这 就 
是 统一 资源 定位 符 (Uniform Resource Locator,URL) 的 功能 ,俗称 为 网 址 。URL 字 串 分 成 
3 个 部 分 : 协议 名 称 、 主 机 名 和 文件 名 (包含 路 径 )。 协 议 名 称 通常 为 http、ftp、file 等 。 例 
如 ,http: //www. yahoo. com. cn/index. htm 是 一 个 URL 地 址 ,其 中 http 指 采用 的 传输 协 
议 是 HTTP, www. yahoo. com. cn 为 主机 名 ,index. htm 为 文件 名 。 又 如 ,file: ///C: 
/Windows/Sandstone. bmp 也 是 一 个 URL 地 址 ,指向 C 盘 中 Windows 目录 下 的 
Sandstone. bmp 文件 ,此 处 的 主机 名 为 C: 。 需 要 说 明 的 是 ,URL 地 址 中 的 主机 名 也 可 直接 
输入 对 应 的 IP 地 址 ,例如 输入 : http: //202. 202. 0. 35/html/index. htm。 为 什么 有 时 
URL 地 址 中 没有 文件 名 还 能 照常 显示 页 面 内 容 呢 ? 这 是 因为 在 Web 服务 器 的 配置 中 ,可 
以 事先 设 定 一 个 或 多 个 默认 文件 名 ,浏览 器 会 自动 查找 这 些 默认 的 文件 名 。 

URL 地 址 有 相对 地 址 和 绝对 地 址 之 分 。 用 浏览 器 进行 浏览 页 面 内 容 时 ,手工 输入 的 
URL 地 址 只 能 为 绝对 地 址 ,相对 地 址 用 于 网 页 文档 内 部 的 链接 地 址 。 假 定 Web 服务 器 的 
主 目录 为 4: \jfhb, 其 下 存在 文件 index. htm,; 有 一 个 子 目 录 web, 存 在 文件 a. htm, 则 
“/web/a. htm” 表 示 相 对 URL 地 址 ,等同 于 “http: //219. 153. 14. 22/web/a. htm”; a. htm 
文档 中 若 存在 “.../index. htm” 代 码 , 则 表示 链接 上 一 级 目录 下 的 文件 index. htm, 它 也 是 
URL 相对 地 址 。 
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1.1.5 浏览 器 的 工作 原理 及 种 类 


浏览 器 (browser) 就 是 Web 客户 端 程序 ,要 浏览 Web 页 面 必须 在 本 地 计算 机 上 安装 浏 
览 器 软件 。 它 是 一 个 软件 程序 ,用 于 与 WWW 建立 连接 ,并 与 之 进行 通信 。 它 可 以 在 
WWW 系统 中 根据 链接 确定 信息 资源 的 位 置 , 并 将 用 户 感 兴趣 的 信息 资源 取 回 来 , 对 
HTML 文件 进行 解释 ,然后 将 文字 图 像 显 示 出 来 ,或 者 将 多 媒体 信息 还 原 出 来 。 与 常规 的 
应 用 软件 不 同 ,浏览 器 是 一 个 必须 标准 化 的 软件 ,原因 在 于 它 的 交互 对 象 是 HTML 代码 。 
Web 浏览 器 的 功能 如 图 1-2 所 示 。 


互联 网 站 点 A 
看 一 下 站 点 A 的 es 
Web 页 面 的 Web 服 务 器 


解析 No | Ot 要 求 | web 服 务 
声音 人 | “| | 所 指定 的 URL | | 器 软 人 
执行 | [一 | | 显示 被 接收 的 HTML、XML 上 -一 
1 3 | 品 示 被 接收 的 蜀 |- 一 | 
数据 存储 高 速 组 4 | 执行 被 接收 的 applet 、script | | 
虽 丰 入 吕 Cooks 一 | 5 | 基于 插件 的 多 媒体 处 理 ”| 一 | 应答 
局 域 网 等 | 通信 6| pp | 


1-2 Web 浏览 器 的 功能 


当 用 户 要 通过 浏览 器 访问 某 一 个 网 站 ,用 户 必须 首先 在 浏览 器 的 地 址 栏 中 输入 相应 的 
网 址 , 称 之 为 URL 地 址 ; 接着 浏览 器 将 向 域名 服务 器 询问 该 网 址 对 应 的 IP 地 址 ,并 根据 返 
回 的 结果 直接 定位 到 目标 服务 器 ; 服务 器 与 浏览 器 双方 完成 通信 握手 之 后 ,该 网 站 对 应 的 
图 文 数据 便 被 送 到 浏览 器 中 。 如 果 收 到 的 是 HTML 代码 和 图 片 ,浏览 器 对 其 进行 解释 之 
后 形成 页 面 显示 ; 而 如 果 遇 到 扩展 名 为 ASP、CGI 之 类 的 脚本 程序 ,解释 工作 就 必须 由 服务 
器 来 完成 ,浏览 器 只 能 被 动 接收 解释 的 结果 并 加 以 显示 ; 当然 ,如 果 在 结果 中 遇 到 HTML 
标记 ,浏览 器 就 会 启动 解释 程序 , 按 HTML 标记 的 要 求 将 网 页 的 内 容 显 示 在 用 户 面前 。 

浏览 器 和 服务 器 之 间 是 通过 超 文本 传送 协议 (HyperText Transfer Protocol, HTTP) 
进行 通信 的 。HTTP 是 一 种 无 记忆 的 协议 , 即 用 户 目 前 正在 浏览 的 页 面 对 在 此 之 前 浏览 过 
的 页 面 没有 丝毫 的 记忆 和 了 解 。 而 实际 情况 是 有 时 需要 浏览 器 能 够 记 住 一 些 信息 , 且 这 些 
信息 却 不 希望 让 其 他 使 用 者 看 到 ,比如 说 用 户 登录 某 网 站 时 ,在 第 一 次 输入 用 户 类 型 和 用 户 
名 后 ,希望 浏览 器 能 记 住 该 用 户 类 型 和 用 户 名 ,再 次 登录 的 时 候 不 需要 输入 ,浏览 器 可 记忆 
用 户 类 型 和 用 户 名 并 直接 代替 用 户 输入 。 为 了 实现 这 样 的 功能 ,在 浏览 器 中 引入 了 Cookie 
的 概念 ,也 就 是 浏览 器 允许 用 户 通过 Cookie 读 写 一 些 信息 ,这 在 一 定 程度 上 实现 了 浏览 器 
的 记忆 功能 。 

浏览 器 主要 分 成 两 类 ,一 类 是 以 Lynx 为 代表 的 、 基 于 字符 的 Web 客户 端 程序 ,主要 在 
不 具备 图 形 图 像 功 能 的 计算 机 上 使 用 。Lynx 是 由 美国 堪萨斯 大 学 的 Lou Montulli 开发 
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的 ,同类 的 浏览 器 还 包括 CERN 开发 的 LineMode Browser。 男 一 类 是 以 NCSA (National 
Center of Supercomputing Application) 开 发 的 Mosaic 为 代表 的 、 面 向 多 媒体 计算 机 的 Web 
客户 端 程序 , 它 可 以 在 各 种 类 型 的 小 型 机 上 运行 ,也 可 以 在 IBM PC、Macintosh 机 以 及 
UNIX 操作 系统 平台 上 运行 ,例如 目前 用 户 使 用 最 多 的 浏览 器 IE(Internet Explorer)、 
Chrome、Firefox、Maxthon、Opera 和 Mac OS 中 的 Safari 等 。 值 得 注意 的 是 ,同一 个 Web 
页 面 在 不 同 的 浏览 器 中 可 能 具有 不 同 的 显示 效果 ,这 是 因为 Web 页 面 中 可 能 使 用 了 该 浏览 
器 不 支持 的 属性 或 方法 ,或 者 浏览 器 所 支持 的 技术 在 版 本 上 有 差异 。 对 于 商业 网 站 来 说 , 需 
要 被 尽 可 能 多 的 用 户 访问 ,因此 在 开发 相关 的 Web 页 面 时 也 变 得 较为 复杂 ,需要 判别 不 同 
的 浏览 器 ,以 对 各 个 浏览 器 支持 的 对 象 、. 属 性 和 方法 分 别 进行 编程 和 调试 。 


1.1.6 C/S 模式 与 B/S 模式 

1. C/S 模式 

在 计算 机 诞生 和 应 用 的 初期 ,计算 所 需要 的 数据 和 程序 都 是 集中 在 一 台 计 算 机 上 进行 
的 , 称 之 为 集中 式 计算 。 随 着 网 络 的 发 展 ,这 种 集中 式 计算 往往 发 展 成 一 种 由 大 型 机 和 多 个 
与 之 相连 的 终端 组 成 的 网 络 结 构 。 当 支持 大 量 用 户 时 ,大 型 机 自 项 向 下 的 维护 和 管理 方式 
显示 出 集中 式 处 理 的 优越 性 。 它 具有 安全 性 好 可 靠 性 高 .计算 能 力 和 数据 存储 能 力 强 以 及 
系统 维护 和 管理 的 费用 较 低 等 优点 。 但 是 它 也 存在 着 一 些 明 显 的 缺点 ,如 大 型 机 的 初始 投 
资 较 大 、 可 移植 性 差 .资源 利用 率 低 以 及 网 络 负载 大 等 。 

随 着 微型 计算 机 和 网 络 的 发 展 ,数据 和 应 用 逐渐 转向 了 分 布 式 , 即 数 据 和 应 用 程序 跨越 
多 个 结 点 ,形成 了 新 的 计算 模式 ,这 就 是 C/S 计算 模式 (Client/Server, 客 户 机 /服务 器 )。 这 
是 一 种 典型 的 两 层 计算 模式 。 

C/S 计算 模式 将 应 用 一 分 为 二 : 前 端 是 客户 机 ,几乎 所 有 的 应 用 逻辑 都 在 客户 端 进行 
和 表达 ,客户 机 完成 与 用 户 的 交互 任务 。 后 端 是 服务 器 , 它 负 责 后 台数 据 的 查询 和 管理 .大 
规模 的 计算 等 服务 。 通 常客 户 端的 任务 比较 繁重 ,因此 称 作 * 肥 ?客户 端 , 而 服务 器 端的 任务 
相对 较 轻 , 称 作 “ 瘦 ”服务 器 。C/S 模式 的 结构 如 图 1-3 所 示 。 


服务 器 端 


1-3 C/S 模 式 结构 


C/S 计算 模式 具有 以 下 几 个 方面 的 优点 : 通过 异种 平台 集成 ,能 够 协调 现 有 的 各 种 基 
础 结构 ; 分 布 式 管理 ; 能 充分 发 挥 客户 端 PC 的 处 理 能 力 , 安 全 ,稳定 .速度 快 , 且 在 适当 情 
况 下 可 脱 机 操作 。 

但 随 着 应 用 规模 日 益 扩大 ,应 用 程序 的 复杂 程度 不 断 提高 ,C/S 结构 逐渐 暴露 出 许多 缺 
点 和 不 足 , 主 要 包括 : 必须 在 客户 端 安装 大 量 的 应 用 程序 (客户 端 软件 ); 需要 在 客户 端 安 
装 支持 系统 运行 的 动态 链接 库 等 。 一 方面 占用 用 户 宝贵 磁盘 空间 ,造成 磁盘 清理 困难 , 另 一 
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方面 由 于 不 同 的 客户 端 程序 可 能 动态 链接 库 版 本 不 一 致 ,容易 引起 “DLL HELL”, 造 成 系 
统 不 能 正常 工作 。 另 外 C/S 结构 还 存在 移植 困难 .用 户 界面 风格 不 统一 、 操 作 复杂 、 不 利于 
推广 使 用 、 维 护 和 升级 过 程 繁 琐 、 信 息 内 容 和 形式 单一 以 及 不 易 应 用 新 技术 等 不 足 。 

在 客户 机 /服务 器 体系 结构 中 ,通常 很 容易 将 客户 机 和 服务 器 理解 为 两 端的 计算 机 。 但 
事实 上 ,“ 客 户 机 ”和 “服务 器 ”在 概念 上 更 多 的 是 指 软件 ,是 指 两 台 机 器 上 相应 的 应 用 程序 ， 
或 者 说 是 “客户 机 进程 "和 “服务 器 进程 ”。 服 务 器 端 和 客户 端 也 不 是 绝对 可 分 的 ,如 果 原 来 
提供 服务 的 服务 器 端 要 接受 别 的 服务 器 端的 服务 , 它 就 转化 为 客户 端 ; 或 者 原来 接受 服务 
的 客户 端 要 为 别 的 客户 端 提供 服务 , 它 就 转化 成 为 服务 器 端 。 很 多 初学 者 在 调试 程序 时 , 往 
往 把 自己 的 计算 机 既 当 作 服 务 器 端 ,又 当 作客 户 端 。 

2. B/S 模式 

进入 20 世纪 90 年 代 以 后 , 随 着 Internet 技术 的 不 断 发 展 ,尤其 是 基于 Web 的 信息 发 
布 和 检索 技术 、Java 技术 以 及 网 络 分 布 式 对 象 技术 的 飞速 发 展 , 常 出 现成 千 上 万 台 客 户 机 
同时 向 服务 器 发 出 请 求 的 情况 ,这 就 使 得 很 多 应 用 系统 的 体系 结构 不 得 不 从 C/S 结构 向 更 
加 灵活 的 多 级 分 布 式 B/S 结构 (Browser/Server, 浏 览 器 /服务 器 模式 ) 演 变 。 

B/S 模式 是 一 种 基于 Web 的 协同 计算 模式 ,是 一 种 三 层 架 构 的 瘦 客 户 机 / 肥 服 务 器 的 
计算 模式 。 第 一 层 为 客户 端 表示 层 , 与 C/S 结构 中 的 “ 肥 ” 客 户 端 不 同 ,三 层 架 构 中 的 客户 
层 只 保留 一 个 Web 浏览 器 ,不 存放 任何 应 用 程序 ,其 运行 代码 可 以 从 位 于 第 二 层 的 Web 服 
务 器 下 载 到 本 地 的 浏览 器 中 执行 ,几乎 不 需要 任何 管理 工作 。 第 二 层 是 应 用 服务 器 层 , 由 一 
台 或 多 台 服 务 器 (Web 服务 器 也 位 于 这 一 层 ) 组 成 ,处 理应 用 中 的 所 有 业务 逻辑 ,包括 对 数 
据 库 的 访问 等 工作 ,该 层 具 有 良好 的 可 扩充 性 ,可 以 随 着 应 用 的 需要 任意 增加 服务 的 数目 。 
第 三 层 是 数据 中 心 层 ,主要 由 数据 库 系统 组 成 。B/S 模式 的 结构 如 图 1-4 所 示 。 


客户 端 Web 上 服务 器 端 数据 服务 器 端 


处 理 
逻辑 男 


图 1-4 B/S 模式 结构 


B/S 模式 与 传统 的 C/S 模式 相 比 体现 了 集中 式 计 算 的 优越 性 : 具有 良好 的 开放 性 , 利 
用 单一 的 访问 点 ,用 户 可 以 在 任何 地 点 使 用 系统 ; 用 户 可 以 跨 平台 以 相同 的 浏览 器 界面 访 
问 系 统 ; 因为 在 客户 端 只 需要 安装 浏览 器 ,取消 了 客户 端的 维护 工作 ,有 效 地 降低 了 整个 系 
统 的 运行 和 维护 成 本 。 

采用 B/S 模式 构建 的 应 用 系统 称 为 B/S 模式 应 用 系统 。B/S 模式 应 用 系统 又 可 分 成 
基于 Intranet 的 应 用 系统 、 基 于 Internet 的 应 用 系统 和 网 站 系统 。 它 们 统称 为 Web 应 用 系 
统 。 网 站 系统 就 是 我 们 平常 所 使 用 的 电子 商务 网 站 、 电 子 政务 网 站 、 各 种 门户 网 站 等 ,它们 
需要 考虑 尽 可 能 多 地 被 各 种 用 户 访问 ,应 考虑 所 开发 的 网 站 兼容 各 种 浏览 器 ,还 需要 考虑 在 
网 络 带宽 有 限 和 不 稳定 的 情况 下 ,仍然 可 以 被 快速 访问 ,因此 除了 考虑 互联 网 上 使 用 的 安全 
性 外 ,其 稳定 性 、 可 靠 性 有效 性 等 也 是 网 站 开发 中 必须 重点 考虑 的 问题 。 基 于 Internet 的 
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应 用 系统 通常 只 服务 于 某 一 企业 ,因此 可 以 不 考虑 浏览 器 的 兼容 性 ,对 其 他 方面 的 要 求 也 相 
对 降低 。 因 为 运行 在 企业 内 联网 上 ,内 联网 网 络 带宽 至 少 在 10Mbps 以 上 , 且 提 供 的 网 络 带 
宽 稳 定 可 靠 , 因 此 在 软件 开发 过 程 中 ,需要 防范 和 重点 考虑 的 问题 比 前 两 个 要 少 得 多 ,在 软 
件 开发 和 运行 成 本 方面 会 有 所 减少 。 


1.1.7 Web 访问 的 原理 


下 面 的 Web 页 面 代 码 将 显示 ”Welcome to My Homepage!” 的 消息 ,是 个 很 简单 的 
HTML 页 面 。 


<html> 

<head> 

<title> MyHomepage </title> 

</head> 

<body> 

<palign= "center"> Welcome to My Homepage!</p> 
</body> 

</htm] > 


首先 , 想 浏览 Web 页 面 的 用 户 需 在 浏览 器 里 输入 页 面 的 URL 地 址 (俗称 网 址 ) 。 假 设 
URL 是 http: //www. cqu. edu. cn。 接 受 这 个 输入 的 Web 浏览 器 以 URL 内 的 域名 为 基 
础 ,向 DNS 服务 器 询问 相应 的 IP 地 址 。 如 果 通 过 DNS 找到 了 IP 地 址 ,就 可 根据 此 IP 地 
址 去 访问 客户 所 指定 的 Web 服务 器 。 接 下 来 Web 服务 器 接受 客户 端的 请 求 把 上 述 
HTML 文件 发 送 给 客户 端 。Web 浏览 器 解析 、 显 示 这 些 信息 ,用 户 便 可 以 看 到 最 终 的 Web 
页 面 ,具体 过 程 如 图 1-5 所 示 。 


想 看 看 Web 客户 端 
www.cqu.edu.cn > (Web 浏 览 器 ) 


的 Web 页 面 A a p 


(2) Web 浏 览 器 向 DNS 服 务 器 询 


Web 服务 器 DNS 服务 器 


(www.cqu.edu.cn) (www.cqu.edu.cn) 


\ (3) DNS 服 务 器 调查 被 询问 
(1) 用 户 在 Web 浏 览 器 中 输入 | 问 http:/www.cqu.edu.cn 的 地 址 | 1p 地 址 的 询问 的 hupywrwwcqu edu en 的 
http://www.cqu.edu.cn “| IP 地 址 

(4) 回答 http://www.cqu.edu.cn 下 地 址 的 回答 

的 由 地 址 


(5) Web 浏 览 器 对 
http://www.cqu edu.cn 
进行 HTML 请 求 
浏览 器 务 器 对 应 于 
(7) Web 浏 览 器 将 HTML | (6) Web 服 人 器 半 
信息 进行 能 后 并 显示 HTML 的 回答 (HTTP) 请 求 ， 发 送 HTML 信 息 


HTML 的 请 求 (HTTP) 


图 1-5 Web 页 面 显 示 前 所 进行 的 处 理 过程 
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在 Web 环境 中 ,大 致 可 以 把 Web 服务 器 向 浏览 器 提供 服务 的 过 程 归纳 为 以 下 几 个 步 又 。 

(1) 用 户 打开 计算 机 (客户 机 ), 启 动 浏 览 器 (Microsoft Internet Explorer、 Google 
Chrome、Mozilla Firefox 等 ) ,并 在 浏览 器 中 指定 一 个 URL 地 址 ,浏览 器 便 向 该 URL 所 指 
向 的 Web 服务 器 发 出 请 求 。 

(2) Web 服务 器 (也 称 为 HTTP 服务 器 ) 接 到 浏览 器 的 请 求 后 ,把 URL 转换 成 页 面 所 
在 服务 器 上 的 文件 路 径 名 。 

(3) 如 果 URL 指向 的 是 普通 的 HTML 文档 ( 即 静 态 网 页 ,就 是 说 该 网 页 文件 里 没有 特 
殊 程序 代码 ,只 有 HTML 标记 ,这 种 网 页 一 般 以 后 绥 . htm 或 . html 的 文件 存放 ), Web 服务 
器 直接 将 它 发 送 给 浏览 器 。 如 果 网 页 中 包含 图 片 动画 声音 等 文件 的 链接 地 址 ,这 些 链 接 
地 址 实际 指向 某 个 文件 , 则 这 些 文件 与 网 页 一 样 要 通过 网 络 传输 到 客户 机 的 浏览 器 缓冲 区 ， 
原理 如 图 1-6 所 示 。 


一 发 出 请 求 | @ 接 受 请 求 
回 找到 页 
一 一 发 回 网 页 


服务 器 端 


客户 端 
图 1-6 静态 网 页 的 工作 原理 
(4) 如 果 URL 指向 的 是 动态 网 页 文件 ,就 是 说 网 页 文件 不 仅 含有 HTML 标记 ,而 且 含 
有 Java、JavaScript、ActiveX 等 编写 的 服务 器 端 脚本 程序 (文件 扩展 名 一 般 为 ASP、ASPX、 


JSP、PHP 等 ), Web 服务 器 就 先 执行 网 页 文件 中 的 服务 器 端 脚本 程序 ,将 含有 程序 代码 的 
动态 网 页 转化 为 标准 的 静态 网 页 ,然后 将 静态 网 页 发 送 给 浏览 器 ,原理 如 图 1-7 所 示 。 


| -2 区 于 
| 一 破 厨 网页 一 | @ 拟 行程 序 代码 ， 生 成 静态 网 页 
p= 二 = 多 发 送 网 页 


客户 端 服务 器 端 
图 1-7 动态 网 页 的 工作 原理 


(5) 如 果 HTML 文档 中 嵌 有 CGI(Common Gateway Interface, 公 共 网 关 接 口 ) 程 序 ， 
Web 服务 器 就 运行 CGI 程序 ,并 将 结果 传送 至 浏览 器 。Web 服务 器 运行 CGI 程序 时 还 可 
能 需要 访问 数据 库 服务 器 和 其 他 服务 器 。 

(6) URL 也 可 以 指向 WMA、MP3、SWF (Flash 文件 )、rm、VRML (Virtual Reality 
Modeling Language, 虚 拟 现实 建 模 语言 ) 等 格式 的 文档 。 例 如 对 于 VRML 文档 ,只 要 浏览 
器 中 配置 有 VRML 插件 ,或 者 客户 机 主机 上 已 安装 VRML 浏览 器 ,就 可 以 接收 Web 服务 
器 发 送 的 VRML 文档 。 


1.1.8 Web 开发 平台 的 组 成 


Web 服务 端 开发 技术 的 完善 使 开发 复杂 的 Web 应 用 成 为 了 可 能 。 在 此 起 彼 伏 的 电子 
商务 大 潮 中 ,为 了 适应 企业 级 应 用 开发 的 各 种 复杂 需求 ,为 了 给 最 终 用 户 提供 更 可 靠 , 更 完 
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善 的 信息 服务 ,在 2001 年 前 后 两 个 最 重要 的 企业 级 开发 平台 一 一 Java EE 和 . NET 相继 诞 
生 了 ,由 此 引发 了 企业 级 Web 开发 平台 领域 的 激烈 竞争 ,也 促使 Web 开发 技术 以 前 所 未 有 
的 速度 发 展 。 

1. .NET 开发 平台 

2000 年 6 月 ,微软 公司 宣布 其 . NET 战略 。2001 年 ,ECMA 通过 了 微软 公司 提交 的 
C# 语 言 和 CLI 标准 ,这 两 个 技术 标准 构成 了 . NET 平台 的 基石 。2002 年 ,微软 公司 正式 发 
布 . NET Framework 和 Visual Studio . NET 开发 工具 。 

微软 公司 的 . NET 战略 揭示 了 一 个 全 新 的 境界 ,提供 了 一 个 新 的 软件 开发 模型 。 NET 
战略 的 一 个 关键 特性 在 于 它 独立 于 任何 特定 的 语言 或 平台 。 它 不 要 求 程序 员 使 用 一 种 特定 
的 程序 语言 。 相 反 ,开发 者 可 使 用 多 种 . NET 兼容 语言 的 任意 组 合 来 创建 一 个 . NET 应 用 
程序 。 多 个 程序 员 可 致力 于 同一 个 软件 项 目 ,但 分 别 采用 自己 最 精通 的 . NET 语言 编写 代码 。 

.NET 平台 及 相关 的 开发 环境 不 但 为 Web 服务 端 应 用 提供 了 一 个 支持 多 种 语言 的 、 通 
用 的 运行 平台 ,而 且 还 引入 了 ASP. NET 这 样 一 种 全 新 的 Web 开发 技术 。ASP. NET 超越 
了 ASP 的 局 限 ,可 以 使 用 VB、C# 、J# 等 编译 型 语言 ,支持 Web 窗 体 、. NET 服务 器 控件 、 
ADO. NET 等 高 级 特性 。 通 过 ASP. NET, 开 发 者 可 快速 创建 基于 Web 的 ,数据 库 密集 型 
的 应 用 程序 ,同时 利用 .NET 的 面向 对 象 语言 的 强大 功能 ,开发 者 可 充分 利用 ASP. NET 的 
性 能 .测试 和 完全 优化 特性 ,开发 出 功能 强大 和 性 能 可 靠 的 Web 应 用 程序 。 

2. Java EE 开发 平台 

Java EE(Java Enterprise Edition) 是 纯粹 基于 Java 的 解决 方案 ,之 前 的 较 低 版 本 叫做 
J2EE。1998 年 ,Sun 公司 发 布 了 EJB 1.0 标准 ,EJB(Enterprise Java Bean) 为 企业 级 应 用 中 
必 不 可 少 的 数据 封装 .事务 处 理 .交易 控制 等 功能 提供 了 和 良好 的 技术 基础 。J2EE 平台 的 三 
大 核心 技术 Servlet、JSP 和 EJB 都 已 先后 问世 。1999 年 ,Sun 公司 正式 发 布 了 J2EE 的 第 一 
个 版 本 。 紧 接着 ,遵循 J2EE 标准 ,为 企业 级 应 用 提供 支撑 平台 的 各 类 应 用 服务 软件 争先 恐 
后 地 涌现 出 来 。IBM 的 WebSphere、BEA 的 WebLogic( 现 已 被 Oracle 收购 ) 是 这 一 领域 里 
最 为 成 功 的 商业 软件 平台 。 随 着 开源 运动 的 兴起 ,JBoss 等 开源 世界 里 的 应 用 服务 新 秀 也 
吸引 了 许多 用 户 的 注意 力 。 到 2003 年 ,Sun 公司 的 J2EE 版 本 已 经 升级 到 1.4 版 ,其 中 3 个 
关键 组 件 的 版 本 也 演进 到 Servlet 2.4、JSP 2.0 和 EJB 2.1。 在 J2EE 版 本 升级 到 1.5 版 时 ， 
Sun 公司 将 其 改名 为 Java EE,EJB 则 升级 为 3. 0。 随 着 Java 技术 的 发 展 ,Java EE 平台 得 
到 了 迅速 的 发 展 ,成 为 Java 语言 中 最 活跃 的 体系 之 一 。 现 如 今 ,Java EE 不 仅仅 是 指 一 种 标 
准 平台 , 它 更 多 地 表达 着 一 种 软件 架构 和 设计 思想 ,已 经 成 为 Web 服务 端 开 发 的 一 个 强 有 
力 的 支撑 环境 。 由 于 Sun 公司 已 在 2009 年 被 Oracle 公司 收购 ,目前 Java EE 已 改称 
Oracle Java EE。 

3. 是 选择 Java EE 还 是 .NET 

究竟 选用 Java EE 还 是 . NET 来 建立 企业 应 用 是 一 个 永远 无 法 了 结 的 争论 。 从 某 种 意 
义 上 说 ,也 正 是 这 种 针锋相对 的 竞争 关系 促使 了 Web 开发 技术 以 前 所 未 有 的 速度 提高 和 路 
进 。 对 于 新 手 来 说 选择 不 同 的 平台 来 进行 开发 意味 着 将 付出 不 同 的 艰辛 和 努力 。 由 于 
.NET 运 行 于 Windows 平台, 易学 好 用 ,开发 平台 和 Windows 组 件 紧密 结合 ,特别 是 微软 提 
供 的 Visual Studio 2010( 简 称 VS 2010) 开 发 工具 ,对 于 新 手 来 说 入 门 非常 容易 ,只 要 系统 
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安装 了 Web 服务 器 ,不 需要 作 任 何 配置 , 即 可 进行 Web 应 用 程序 开发 ,而 且 开 发 工具 集成 
了 大 量 控件 和 组 件 , 自 动 生成 大 量 代 码 ,编程 过 程 中 提供 人 性 化 的 界面 提示 和 帮助 ,可 以 大 
大 提高 开发 效率 。 而 在 Java EE 开发 平台 中 ,还 没有 一 种 开发 工具 可 以 和 VS 2010 的 易 用 
性 相 媲美 。Java EE 架构 中 ,要 学 习 的 内 容 似乎 更 多 ,例如 Java Servlet、Struts、JSF、 
Hibernate、JDBC、EJB 等 ,而 在 VS 2010 中 拖 动 鼠标 和 简单 学 习 也 就 完成 了 对 应 的 功能 。 
但 Java EE 可 以 实现 跨 操作 系统 平台 运行 ,其 Web 服务 器 一 般 运 行 在 Linux 或 UNIX 操作 
系统 上 ,有 大 量 开源 代码 ,运行 效率 、 安 全 性 、 可 靠 性 高 ,一 般 认为 Java EE 更 适合 构建 大 型 
企业 级 应 用 ,但 开发 费用 .开发 时 间 、 维 护 成 本 有 可 能 高 于 开发 相同 功能 的 . NET 应 用 系统 。 
事实 上 ,在 VS 2010 开发 环境 中 使 用 C# 或 VB 语言 ,通过 免费 插件 Grasshopper 也 可 以 快 
速 开发 出 运行 在 Linux 上 的 ASP. NET 应 用 系统 ,并 可 将 应 用 系统 部 署 在 Tomcat 等 Web 服 
务 器 上 ,从 而 真正 实现 . NET 的 跨 操作 系统 平台 功能 (参见 : http: //dev. mainsoft. com) 。 

从 快速 学 习 和 掌握 Web 开发 技术 角度 ,建议 大 部 分 新 手 可 选择 . NET 平台 作为 自己 的 
Web 开发 平台 。 而 且 一 旦 掌握 了 基本 的 Web 开发 技术 ,也 为 转向 Java EE 打下 良好 基础 。 


1.1.9 常用 Web 开发 工具 


早期 的 网 站 开发 ,实际 上 就 是 制作 网 页 ,人 们 用 记事 本 等 简易 工具 手工 编写 HTML 代 
码 , 既 枯燥 乏味 、 容 易 出 错 ,又 不 直观 。 为 了 提高 网 页 制作 效率 ,人 们 不 断 推出 一 个 又 一 个 
“所 见 即 所 得 WYSIWYG) 的 可 视 化 网 页 制作 工具 ,用 WYSIWYG 制作 工具 编写 网 页 ,不 
需要 与 繁杂 的 HTML 代码 打交道 ,用 户 可 以 像 使 用 Word 一 样 只 负责 页 面 的 编排 ,代码 由 
软件 自动 生成 ,而 编写 的 网 页 效果 就 是 浏览 器 的 实际 浏览 效果 ,编写 过 程 简单 、 直 观 。 典 型 
代表 为 美国 Sausage 公司 的 HotDog、Adobe 公司 的 Golive 以 及 网 页 制作 三 剑客 
Dreamweaver、Flash、Fireworks、 微 软 的 Frontpage、Expression Web 等 。 伴 随 着 开发 B/S 
应 用 系统 的 大 量 需 求 ,人 们 迫切 需要 使 用 Web 集成 开发 环境 来 高 效 开 发 B/S 应 用 系统 ,出 
现 了 集 可 视 化 网 页 生成 编码、 数据 操纵 .调试 .发布 等 为 一 体 的 Web 专业 开发 工具 ,又 称 
Web IDE 开发 工具 。 典 型 代表 如 Microsoft Interdev、Microsoft Visual Studio 2010、 
Borland JBuilder、IBM Eclipse、IBM VisualAge for Java、Oracle JDeveloper 等 。 前 2 个 微软 
开发 工具 可 以 实现 ASP/ASP. NET 网 站 的 开发 ; 后 4 个 工具 可 以 进行 Java EE 平台 的 开 
发 。 新 版 本 的 Dreamweaver 和 Expression Web 的 功能 已 不 可 同日 而 语 , 它 们 的 Web 开发 
功能 虽然 比 不 上 Web 专业 开发 平台 ,但 它们 具备 很 多 Web 专业 开发 平台 所 没有 的 功能 。 
如 能 熟悉 两 类 工具 的 功能 ,交叉 利用 ,将 可 大 大 提高 Web 开发 的 效率 。 网 页 制作 工具 和 
Web 开发 工具 的 主要 区 别 是 Web 开发 工具 可 以 设置 断 点 进行 程序 调试 ,可 以 和 版 本 控制 
软件 紧密 结合 ,更 适合 于 团队 开发 。 下 面 对 这 些 工具 分 别 作 简 单 的 介绍 。 

1. 网 页 制作 工具 


1) Sausage HotDog Professional 

HotDog 是 较 早 基于 代码 的 网 页 设计 工具 ,支持 最 新 的 Web 标准 和 扩展 ,其 最 具 特 色 
之 处 是 提供 了 许多 向 导 工具 ,能 帮助 设计 者 制作 页 面 中 的 复杂 部 分 。 它 针对 专业 网 站 管理 
员 ,提供 最 全 面 的 网 站 开发 工具 组 合 , 几 乎 涵盖 了 网 站 制作 和 管理 的 所 有 工具 。HotDog 对 
plug-in 的 支持 也 远 远 超过 其 他 产品 , 它 提供 的 对 话 框 允许 用 户 以 手动 方式 为 不 同 格式 的 文 
件 选择 不 同 的 选项 。 所 提供 的 多 层次 搜寻 及 更 改 内 容 、 浮 动工 具 列 、 立 即 预 视 、 音 效 及 FTP 
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工具 等 功能 ,可 以 让 用 户 在 制作 网 站 时 更 为 轻松 。HotDog 是 个 功能 强大 的 软件 ,对 于 那些 
希望 在 网 页 中 加 入 CSS、Java、RealVideo 等 复杂 技术 的 高 级 设计 者 ,是 个 很 好 的 选择 。 

2) Adobe Dreamweaver、Fireworks、Flash .Golive 

Adobe Dreamweaver 是 最 流行 的 开发 工具 之 一 , 它 原来 由 Macromedia 公司 开发 ,后 在 
2005 年 被 Adobe 公司 收购 ,作为 一 个 “所 见 即 所 得 ”的 可 视 化 网 站 开发 工具 ,该 软件 同时 适 
用 于 初学 者 和 专业 网 页 设计 师 。 它 友好 的 界面 、 功 能 强大 和 快捷 的 工具 以 及 可 视 化 特征 ,可 
以 使 初学 者 直接 在 页 面 上 添加 和 编辑 元 素 , 而 不 用 写 源 代码 ,软件 会 自动 将 结果 转换 为 
HTML 源 代码 ,而且 它 还 集成 了 目前 最 流行 的 制作 网 页 的 多 种 功能 ,比如 可 通过 层 秋 样式 
(CSS) 格 式 化 文本 ,通过 表格 定位 网 页 元 素 , 通 过 时 间 轴 实现 一 些 网 页 的 动画 ,以 及 可 进行 
源 代码 编写 修改 功能 等 ,大 大 方便 了 网 页 设计 者 。Dreamweaver 给 专业 人 员 提 供 了 在 一 个 
集成 .高效 的 环境 中 所 需 的 工具 。 开 发 人 员 可 以 使 用 Dreamweaver 及 所 选择 的 服务 器 技术 
来 创建 功能 强大 的 Internet 应 用 程序 , 从 而 使 用 户 能 连接 到 数据 库 、Web 服务 等 。 
Dreamweaver 除了 可 以 用 来 开发 静态 网 页 外 ,还 支持 动态 服务 器 网 页 JSP、PHP、ASP 等 的 
开发 。 同 时 ,该 软件 集 网 页 制作 和 网 站 管理 于 一 身 , 能 轻松 实现 对 本 地 网 站 及 远程 网 站 的 管 
理 及 异地 网 页 编辑 管理 的 功能 。 

Adobe Fireworks 原来 也 是 由 Macromedia 公司 开发 ,后 被 Adobe 公司 收购 的 一 款 开发 
工具 。 它 以 处 理 网 页 图 片 为 特长 ,并 可 以 轻松 创作 GIF 动画 。 它 的 出 现 使 Web 作 图 发 生 
了 革命 性 的 变化 。Fireworks 是 专 为 网 络 图 像 设 计 而 开发 ,内 建 丰富 的 支持 网 络 出 版 功能 ， 
比如 Fireworks 能 够 自动 切 图 、 生 成 鼠标 动态 感应 的 JavaScript 代码 。 而 且 Fireworks 具有 
十 分 强大 的 动画 功能 和 一 个 几乎 完美 的 网 络 图 像 生 成 器 (Export 功能 )。 它 增强 了 与 
Dreamweaver 的 联系 ,可 以 导出 为 配合 CSS 样式 的 网 页 及 图 片 。 

Adobe Flash 是 当今 Internet 最 流行 的 多 媒体 (如 网 上 各 种 动感 网 页 、LOGO, 广 告 、 
MTV ` 游 戏 和 高 质量 的 课件 等 ) 创 作 工 具 , 并 成 为 事实 上 的 交互 式 矢 量 动画 标准 ,就 连 软件 
巨头 微软 也 不 得 不 在 其 Internet Explorer 中 内 骨 Flash 播放 器 。 

由 于 Flash 中 采用 了 矢量 作 图 技术 ,各 元 素 均 为 矢量 ,因此 只 用 少量 的 数据 就 可 以 描述 
一 个 复杂 的 对 象 ,从 而 大 大 减少 动画 文件 的 大 小 。 而 且 矢 量 图 像 还 有 一 个 优点 ,可 以 真正 做 
到 无 级 放大 和 缩小 ,你 可 以 将 一 幅 图 像 任意 地 缩放 ,而 不 会 有 任何 失真 。 

Flash 之 所 以 在 网 上 广 为 流 传 ,块头 小 是 其 一 个 方面 ,还 有 一 点 就 是 采用 了 流 控 制 技 
术 。 简 单 地 说 .也 就 是 边 下载 边 播放 的 技术 ,不 用 等 整个 动画 下 载 完 ,就 可 以 开始 播放 。 

Flash 动画 是 由 时 间 先 后 顺序 排列 的 一 系列 编辑 帧 组 成 的 ,在 编辑 过 程 中 ,除了 传统 的 
“ 帧 一 帧 动画 变形 以 外 ,还 支持 了 过 渡 变 形 技术 ,包括 移动 变形 和 形状 变形 .。“ 过 渡 变 形 ? 方 
法 只 需 制 作出 动画 序列 中 的 第 一 帧 和 最 后 一 帧 (关键 帧 ) ,中 间 的 过 渡 帧 可 通过 Flash 计算 
自动 生成 。 这 样 不 但 大 大 减少 动画 制作 的 工作 量 ,缩减 动画 文件 的 尺寸 ,而 且 过 渡 效果 非常 
平滑 。 对 帧 序列 中 的 关键 帧 的 制作 ,可 产生 不 同 的 动画 和 交互 效果 。 播 放 时 ,也 是 以 时 间 线 
上 的 帧 序列 为 顺序 依次 进行 的 。 

Flash 动画 与 其 他 动态 图 像 的 一 个 基本 区 别 就 是 具有 交互 性 。 所 谓 交 互 就 是 通过 使 用 
键盘 .鼠标 等 工具 ,可 以 在 作品 各 个 部 分 跳 转 ,使 受众 参与 其 中 。 

Flash 交互 是 通过 Action Script 实现 的 。Action Script 是 Flash 的 脚本 语言 , 随 着 其 版 
本 的 不 断 更 新 ,日 趋 完 美 。 使 用 Action Script 可 以 控制 Flash 电影 中 的 对 象 、 创 建 导航 和 交 
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互 元 素 , 制 作 非 常 具有 魅力 的 作品 。 

Flash 功能 强大 ,但 学 习 Flash 并 不 是 一 件 很 难 的 事 。Flash 的 设计 界面 友好 ,操作 方 
便 。 有 兴趣 的 设计 者 即使 从 未 接触 过 ,只 要 经 过 一 段 时 间 培 训 , 就 可 以 轻松 地 用 Flash 做 出 
简单 的 动画 ; 而 闪 客 高 手 (擅长 制作 Flash 动画 的 人 ) 则 更 可 以 发 挥 想 象 力 ,随心 所 欲 地 制 
作 复 杂 的 动画 ,在 作品 中 实现 自己 的 梦想 ,创造 出 动感 十 足 、 交 互 性 强 、 精 美 绝伦 的 意境 。 

Adobe 公司 开发 的 Golive 包含 了 设计 、 制 作 和 管理 动态 网 站 的 所 有 工具 ,特别 是 精确 
布置 页 面 元 素 的 页 面 排版 工具 ,包括 排版 网 格 、 表 格 、 浮 动 块 等 。Golive CS3 ,虽然 它 在 Web 
后 台 支 持 方面 有 些 不 尽 如 人 意 ,但 它 与 Adobe 公司 的 其 他 产品 都 可 以 很 好 地 集成 使 用 。 其 
内 置 的 Photoshop 引擎 可 以 在 改变 图 像 时 自动 优化 Photoshop 文件 。 通 过 Smart Object 可 
以 轻松 编辑 来 自 Adobe 其 他 软件 产品 的 文件 ,而 且 修改 结果 会 立即 在 Golive 中 得 到 更 新 。 
Golive 还 可 以 通过 多 窗口 预览 组织 真实 的 或 计划 中 的 页 面 , 从 而 轻松 管理 整个 网 站 。 在 
Site Design View 中 ,可 以 高 效 地 重新 布置 页 面 \ 改 变 页 面 链接 关系 .并 行使 用 多 个 设计 概 
念 或 在 原型 网 站 之 间 移 动 元 素 。Adobe GoLive 以 前 主要 的 竞争 对 手 是 Dreamweaver ,被 
Adobe 公司 收购 后 ,两 个 软件 被 纳入 同一 家 公司 。Dreamweaver 可 以 支持 Ajax 和 CSS ,而 
GoLive 则 不 支持 ,Adobe 鼓励 客户 们 转移 至 Dreamweaver。 之 后 ,Adobe 公司 宣布 停止 开 
发 GoLive, 只 提供 相关 的 技术 支持 , 旧 GoLive 用 户 可 以 付费 升级 到 Dreamweaver。 

3) Microsoft FrontPage 

FrontPage 是 一 款 由 微软 公司 推出 具有 “所 见 即 所 得 ”特点 的 网 页 制作 软件 。 
FrontPage 的 主要 功能 是 设计 、 制 作 、 管 理 网 页 或 站 点 , 它 的 操作 对 象 主要 是 网 页 或 网 站 。 
从 单个 网 页 到 复杂 网 站 的 设计 制作 ,以 及 本 地 或 远程 网 站 的 管理 ,都 可 以 使 用 FrontPage 完 
成 。FrontPage 带 有 图 形 和 GIF 动画 编辑 器 ,支持 CGI 和 CSS。 向 导 和 模板 使 初学 者 在 编 
辑 网 页 时 感到 更 加 方便 。FrontPage 最 强大 之 处 是 其 站 点 管理 功能 。 在 更 新 服务 器 上 的 站 
点 时 ,不 需要 创建 更 改 文件 的 目录 ,FrontPage 会 为 你 跟踪 文件 并 复制 那些 新 版 本 文件 。 
FrontPage 可 以 通过 Internet 直接 对 远程 服务 器 上 的 文件 进行 操作 。 但 FrontPage 生成 代 
码 宛 余 .不 符合 HTML 规范 及 对 数据 库 支持 不 足 等 缺陷 表明 其 功能 已 无 法 满足 更 高 要 求 ， 
微软 推出 新 产品 Microsoft SharePoint Designer 替代 FrontPage 成 为 必然 。 

2. Web 开发 工具 

1) Microsoft Visual Studio 2010(VS 2010) 

VS 2010 是 一 套 完整 的 开发 工具 集 , 用 于 生成 Web 应 用 程序 、Web 服务 、 桌 面 应 用 程 
序 和 移动 应 用 程序 等 。 在 VS 工具 套件 中 ,编程 语言 Visual Basic、Visual C++、Visual C# 
和 Visual J# 全 都 使 用 相同 的 集成 开发 环境 (IDE) ,利用 此 IDE 可 以 共享 工具 且 有 助 于 创 
建 混合 语言 解决 方案 。 另 外 ,这 些 语言 利用 了 . NET Framework 的 功能 ,通过 使 用 此 框架 
可 简化 Web 应 用 程序 和 Web 服务 的 开发 过 程 。 本 书 第 2 章 将 详细 介绍 该 工具 的 使 用 。 

2) Borland JBuilder 

有 人 说 ,Borland 公司 的 开发 工具 都 是 里 程 碑 式 的 产品 ,从 Turbo C、Turbo Pascal 到 
Delphi、C++ Builder 都 是 经 典 。JBuilder 是 第 一 个 可 开发 企业 级 应 用 的 跨 平 台 开 发 环境 , 支 
持 最 新 的 Java 标准 , 它 的 可 视 化 工具 和 向 导 使 应 用 程序 的 快速 开发 得 以 轻松 实现 。 

JBuilder 进入 了 Java 集成 开发 环境 的 王国 ,支持 最 新 的 Java 技术 ,包括 Applet、JSP/ 
Servlet JavaBean 以 及 EJB(Enterprise JavaBean) 的 应 用 。 用 户 可 以 自动 生成 基于 后 端 数 
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据 库 表 的 EJB Java 类 ,JBuilder 同时 还 简化 了 EJB 的 自动 部 署 功能 。 此 外 它 还 支持 
CORBA ,相应 的 向 导 程 序 有 助 于 用 户 全 面 地 管理 IDL(Interface Definition Language, 分 布 
应 用 程序 所 必需 的 接口 定义 语言 ) 和 控制 远程 对 象 。 同 时 JBuilder 还 支持 各 种 应 用 服务 器 。 
JBuilder 与 Inprise Application Server 紧密 集成 ,同时 支持 WebLogic Server, 支 持 EJB 1.1 
和 EJB 2.0, 可 以 快速 开发 J2EE 的 电子 商务 应 用 。JBuilder 能 用 Servlet 和 JSP 开发 并 调 
试 动态 Web 应 用 。 利 用 JBuilder 可 创建 没有 专 有 代码 和 标记 的 纯 Java 应 用 。JBuilder 拥 
有 专业 化 的 图 形 调试 界面 ,支持 多 线程 调试 ,调试 器 支持 各 种 JDK 版 本 ,包括 J2ME/J2SE/ 
J2EE。JBuilder 环境 开发 程序 方便 ,适合 企业 的 J2EE 开发 ,但 对 计算 机 硬件 要 求 较 高 。 

3) IBM Eclipse 

Eclipse 是 一 种 可 扩展 的 开放 源 代 码 的 IDE (集成 开发 环境 ), 由 IBM 出 资 组 建 。 
Eclipse 允许 在 同一 IDE 中 集成 来 自 不 同 供应 商 的 工具 ,并 实现 了 工具 之 间 的 互 操 作 性 ,从 
而 显著 改善 了 项 目 工作 流程 ,使 开发 者 可 以 专注 在 实际 开发 目标 上 。Eclipse 的 最 大 特点 是 
它 能 接受 由 Java 开发 者 自己 编写 的 开放 源 代码 插件 ,这 类 似 于 微软 公司 的 Visual Studio 和 
Sun 公司 的 NetBeans 平 台 。Eclipse 为 工具 开发 商 提供 了 更 好 的 灵活 性 ,使 他 们 能 更 好 地 
控制 自己 的 软件 技术 。Eclipse 框架 灵活 、 扩 展 容易 ,因此 很 受 开 发 人 员 的 喜爱 ,目前 它 的 支 
持 者 越 来 越 多 ,大 有 成 为 Java 第 一 开发 工具 之 势 。 它 的 缺点 是 较 复 杂 , 初 学 者 理解 起 来 比 
较 困难 。 后 续 推出 的 MyEclipse 是 对 Eclipse IDE 的 扩展 , 它 是 功能 丰富 的 Java EE 集成 开 
发 环境 ,包括 了 完备 的 编码 调试、 测试 和 发 布 功能 。 

4) IBM VisualAge for Java 

VisualAge for Java 是 一 个 非常 成 熟 的 开发 工具 , 它 既 适合 初学 者 ,又 适合 专业 开发 者 。 
它 提 供 对 可 视 化 编程 的 广泛 支持 ,支持 利用 CICS 连接 遗留 的 大 型 机 应 用 ,支持 EJB 的 开发 
应 用 ,支持 与 WebSphere 的 集成 开发 .方便 的 Bean 创建 和 良好 的 快速 应 用 开发 (RAD)。 
VisualAge for Java Professional Edition 包含 在 WebSphere Studio Advanced Edition 中 。 
Studio 所 提供 的 工具 有 : Web 站 点 管理 ,快速 开发 JDBC 页 向 导 程 序 、HTML 编辑 器 和 
HTML 请 法 检查 等 。Studio 和 VisualAge 集成 度 很 高 ,各 自 菜单 中 都 提供 了 在 两 种 软件 包 
之 间 快 速 移动 代码 的 选项 。 这 就 让 使 用 Studio 的 Web 页 面 设计 人 员 和 使 用 VisualAge 的 
Java 程序 员 可 以 相互 交换 文件 .协同 工作 。 

VisualAge for Java 支持 团队 开发 ,其 内 置 的 代码 库 可 以 自动 地 根据 用 户 改 动 修改 程序 
代码 ,这样 就 可 以 很 方便 地 将 目前 代码 和 早期 版 本 做 出 比较 。 与 VisualAge 紧密 结合 的 
Websphere Studio 本 身 并 不 提供 源 代 码 和 版 本 管理 的 支持 , 它 只 是 包含 了 一 个 内 置 文件 锁 
定 系 统 , 当 编辑 项 目的 时 候 可 以 防止 其 他 人 对 这 些 文件 的 错误 修改 ,软件 还 支持 诸如 
Microsoft Visual SourceSafe 这 样 的 第 三 方 源 代码 控制 系统 。VisualAge for Java 完全 面向 
对 象 的 程序 设计 思想 ,使 得 开发 程序 非常 快速 、 高 效 。 你 可 以 不 编写 任何 代码 就 设计 出 一 个 
典型 的 应 用 程序 框架 。VisualAge for Java 作为 IBM 电子 商务 解决 方案 中 的 产品 之 一 ,可 
以 无 颖 地 与 其 他 IBM 产品 ,如 WebSphere、DB2 融合 ,迅速 完成 从 设计 、 开 发 到 部 署 应 用 的 
整个 过 程 。 不 过 VisualAge for Java 独特 的 管理 文件 方式 使 其 集成 外 部 工具 非常 困难 。 

5) Oracle JDeveloper 

Oracle 10g JDeveloper( 最 新 为 11g) 为 构建 具有 J2EE 功能 、 能 提供 XML (eXtensible 
Markup Language, 可 扩展 标记 语言 ) 和 Web Service 的 、 复杂 的 、 多 层 的 Java 应 用 程序 提供 
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了 一 个 完全 集成 的 开发 环境 。 它 为 运用 Oracle 10g 数据 库 和 应 用 服务 器 的 开发 人 员 提 供 特 
殊 的 功能 和 增强 性 能 , 它 也 有 资格 成 为 用 于 多 种 用 途 的 Java 开发 的 一 个 强大 的 工具 。 

JDeveloper 不 仅仅 是 很 好 的 Java 编程 工具 ,而 且 是 Oracle Web 服务 的 延伸 ,支持 
Apache SOAP 以 及 10g AS。Oracle 10g JDeveloper 完全 利用 Java 编写 ,能 够 与 以 前 的 
Oracle 服务 器 软件 以 及 其 他 厂商 支持 J2EE 的 应 用 服务 器 产品 相 兼 容 , 而 且 在 设计 时 着 重 
针对 Oracle 10g, 能 够 实现 无 缝 跨 平台 应 用 开发 ,提供 完整 的 、 集 成 了 J2EE 和 XML 的 开发 
环境 。 缺点 就 是 对 于 初学 者 来 说 , 较 复 杂 , 也 比较 难 。 

除了 上 述 Web 开发 工具 外 ,还 有 一 些 开发 平台 可 以 针对 . NET 和 Java EE 两 种 平台 
行 开发 ,例如 IBM Domino Designer 8 开发 工具 、Sybase PowerBuilder Web 开发 工具 等 。 
IBM Domino Designer 8 开发 工具 可 用 于 建立 基于 Web 的 Lotus Domino 应 用 程序 , 它 可 实 
现 基于 工作 流 的 Web 应 用 程序 开发 。 

前 面 介绍 了 几 种 常用 的 Web 开发 工具 ,对 于 初学 Web 开发 者 ,可 能 会 自然 地 问 如 “我 
选择 哪 一 个 Web 开发 工具 为 好 ?” 的 问题 。 对 于 Web 开发 者 ,一 般 在 . NET 平台 上 ,选择 
VS 2010, 在 Java EE 平台 上 选择 MyEclipse。 采 用 Web 开发 平台 , Web 开发 者 可 以 开发 
B/S 模式 的 应 用 软件 系统 ,而 不 是 仅仅 局 限 在 生成 网 页 、 构 建 一 个 网 站 等 方面 。 例 如 ,利用 
VS 2010, 开 发 者 可 以 像 使 用 Visual Basic、Visual C++ 等 开发 工具 一 样 ,用 VB 语言 `.C# 语 
言 J# 语 言 在 HTML 页 面 和 后 台 代 码 分 离 的 情况 下 编写 复杂 的 业务 处 理 逻 辑 。 俗 话说 ， 
“ 工 欲 善 其 事 , 必 先 利 其 器 ?,“ 麻 刀 不 误 砍 此 工 >”。 对 于 Web 开发 者 来 说 ,由 于 Web 开发 平 
台 在 网 页 制作 上 功能 不 是 很 强 ,掌握 Expression Web 或 Dreamweaver 等 工具 的 使 用 ,利用 
它们 强大 的 网 页 制作 功能 作为 开发 平台 的 辅助 工具 ,可 以 大 大 提高 开发 效率 。 如 果 对 多 媒 
体制 作 工 具 比 较 熟 悉 , 例 如 Photoshop、Flash、Fireworks 等 ,用 它们 来 制作 网 页 素材 和 生成 
一 些 风格 独特 的 网 页 , 则 定 会 使 网 站 增色 。 


1.2 Web 基本 技术 介绍 


在 信息 领域 中 ,Web 技术 几乎 汇集 了 当前 信息 处 理 的 所 有 技术 手段 ,以 求 最 大 限度 地 
满足 人 性 化 的 特点 。 由 于 Web 正 处 在 日 新 月 异 的 高 速 发 展 之 中 , 它 所 覆盖 的 技术 领域 和 层 
次 深度 也 在 不 断 改 变 , 所 以 我 们 在 这 里 只 讨论 主流 技术 的 相关 内 容 。 现 阶段 Web 的 基本 技 
术 包括 HTML、DHTML、Java Applet JavaScript 与 VBScript、CGI、PHP、JSP、ASP/ASP. 
NET、XML、ADO/ADO. NET 和 Web Service 等 。 下 面 分 别 对 它们 进行 介绍 。 


152:1 “HTME 


HTML(HyperText Markup Language, 超 文本 标记 语言 ) 是 一 种 用 来 制作 超 文 本 文档 
的 简单 标记 语言 , 它 实际 上 是 标准 通用 标记 语言 (Standard Generalized Markup Language， 
SGML) 的 一 个 子 集 。SGML 是 1986 年 发 布 的 一 个 信息 管理 方面 的 国际 标准 (ISO 8879) 。 

HTML 语言 通过 利用 近 120 种 标记 来 标识 文档 的 结构 以 及 标识 超 链接 的 信息 。 虽 然 
HTML 语言 描述 了 文档 的 结构 格式 ,但 并 不 能 精确 地 定义 文档 信息 必须 如 何 显示 和 排列 ， 
而 只 是 建议 Web 浏览 器 应 该 如 何 显 示 和 排列 这 些 信息 ,最 终 在 用 户 面前 的 显示 结果 取决 于 
Web 浏览 器 本 身 的 显示 风格 及 其 对 标记 的 解释 能 力 。 这 就 是 为 什么 同一 文档 在 不 同 的 浏 
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览 器 中 展示 的 效果 会 不 一 样 的 原因 。 


在 互联 网 发 展 的 开始 阶段 ,人 们 通过 浏览 器 浏览 的 页 面 一 般 都 是 HTML 静态 页 面 , 也 
即 Web 页 面 只 包括 单纯 的 HTML 标记 文本 内 容 , 浏 览 器 也 只 能 显示 果 板 的 文字 或 图 像 等 
信息 。 静 态 页 面 是 实际 存在 的 ,无 须 经 过 服务 器 编译 ,而 可 直接 加 载 到 客户 端 浏 览 器 上 显示 
出 来 。 用 户 使 用 客户 机 端的 Web 浏览 器 ,访问 Internet 上 各 个 Web 站 点 ,在 每 一 个 站 点 上 
都 有 一 个 主页 (Home Page) 作 为 进入 某 个 Web 站 点 的 入 口 。 每 一 Web 页 中 都 可 以 含有 信 
息 及 超 文本 链接 , 超 文 本 链接 可 以 让 用 户 链接 到 另 一 Web 站 点 或 是 其 他 Web 页 。 从 服务 
器 端 来 看 ,每 一 个 Web 站 点 由 一 台 主 机 、Web 服务 器 及 许多 Web 页 组 成 ,以 一 个 主页 为 首 ， 
其 他 的 Web 页 为 支点 ,形成 一 个 树 状 的 结构 ,每 一 个 Web 页 都 是 以 HTML 的 格式 编写 的 。 
Web 服务 器 使 用 HTTP 超 文本 传输 协议 ,将 HTML 文档 从 Web 服务 器 传输 到 用 户 的 
Web 浏览 器 上 ,就 可 以 在 用 户 的 屏幕 上 显示 出 特定 设计 风格 的 Web 页 。 

HTML 文件 是 一 种 纯 文 本 文件 ,通常 它 带 有 . htm 或 . html 的 文件 扩展 名 (在 UNIX 中 
的 扩展 名 为 . html)。 可 以 使 用 各 种 类 型 的 工具 来 创建 或 者 处 理 HTML 文档 ,从 简单 的 文 
本 编辑 器 如 “记事 本 ”“ 写 字 板 ”等 到 复杂 的 具有 


涩 HTML 文 着 基本 标记 演示 - Microsof Internete| 


“所 见 即 所 得 ”特性 的 可 视 化 编辑 工具， 如 [EGRSG 到 在 WIKIRCOEE| | 
FrontPage、Dreamweaver 等 都 可 用 来 创建 或 者 处 


这 是 一 个 HTIL 文 档 基 本 标记 演示 效果 ! 


理 HTML 文档 。 

【 例 1.1】 以 下 是 一 个 简单 的 HTML 文档 | 这 是 一 个 文本 块 标记 
index. htm, 存 放 在 C: \Inetpub\wwwroot 下 ,在 
浏览 器 中 显示 效果 如 图 1-8 所 示 。 将 鼠标 指针 放 
在 按钮 上 将 会 出 现 *I am a button” 提 示 信 息 。 这 
是 由 按钮 标记 中 的 title 属性 实现 的 。 18 HTML 文档 index htm 显示 效果 


<! DOCTYPE HTML PUBLIC " ~ //W3C//DTD HTML 4. 01 Transitional//EN" "http: //www. w3. org/TR/ 
html4/loose. dtd"> 
<html> 
<! -- 这 是 一 个 HTML 文档 基本 标记 演示 -一 > 
< head> 
< meta http— equiv = "Content ~ Type" content = "text/html; charset = gb2312"> 
<title> HTML 文档 基本 标记 演示 </title> 
</head> 
<body bgcolor = #FFFFCC> 
这 是 一 个 HTML 文档 基本 标记 演示 效果 ! 
<div> 这 是 一 个 文本 块 标记 </div> 
<br> 
<hr> 
< input id= Buttonl title= "I am a button" type = "button" value = button > 
</body> 
</html > 


当前 广泛 使 用 的 是 HTML 4. 0 版 本 , 正 逐 步 向 HTML 5.0 版 本 过 渡 。 本 书 第 3 章 将 
简要 介绍 HTML 5。 
以 HTML 编写 的 静态 页 面 已 不 能 够 满足 用 户 的 浏览 需求 。 用 户 除了 浏览 相关 信息 
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外 ,还 需要 与 页 面 进行 交互 操作 ,这 就 要 求 浏览 器 能 处 理 用 户 的 请 求 。 在 这 种 需求 下 ,1995 年 
后 的 浏览 器 发 展 成 为 支持 Web 页 中 加 入 JavaScript 或 VBScript 脚本 代码 的 网 页 ,以 便 创 
建 内 容 和 表现 力 更 加 丰富 的 HTML 页 面 ,可 以 让 用 户 实现 浏览 器 中 的 动态 交互 操作 。 但 
此 时 的 网 页 仍然 是 静态 网 页 , 它 不 需要 Web 服务 器 做 任何 工作 , Web 服务 器 将 网 页 传送 到 
客户 端 后 ,由 浏览 器 解释 执行 带 有 脚本 语言 的 网 页 。 但 这 种 静态 页 面 已 经 让 用 户 感受 到 网 
页 的 多 姿 多 彩 , 已 具有 某 种 程度 上 的 动态 特性 ,而 这 种 特性 是 基于 客户 端 浏览 器 的 。 

随 着 互联 网 技术 的 不 断 发 展 以 及 网 上 信息 呈 几 何 级 数 的 增加 ,人 们 逐渐 发 现 手工 编写 
包含 所 有 信息 和 内 容 的 页 面 对 人 力 和 物力 都 是 一 种 极 大 的 浪费 ,而 且 几 乎 变 得 难以 实现 。 
此 外 ,采用 静态 页 面 方式 建立 起 来 的 站 点 只 能 简单 地 根据 用 户 的 请 求 传送 现 有 页 面 ,而 无 法 
实现 各 种 动态 的 交互 功能 。 具 体 来 说 ,静态 页 面 在 以 下 几 个 方面 都 存在 明显 的 不 足 : 

(1) 无 法 支持 后 台数 据 库 。 随 着 网 上 信息 量 的 增加 ,以 及 企业 和 个 人 希望 通过 网 络 发 
布 产品 和 信息 的 需求 的 增强 ,人 们 越 来 越 需要 一 种 能 够 通过 简单 的 Web 页 面 访问 服务 端 后 
台数 据 库 的 方式 。 这 是 静态 页 面 所 远 远 不 能 实现 的 。 

(2) 无 法 有 效 地 对 站 点 信息 进行 及 时 的 更 新 。 用 户 如 果 需 要 对 传统 静态 页 面 的 内 容 和 
信息 进行 更 新 或 修改 的 话 , 只 能 够 采用 逐一 更 改 每 个 页 面 的 方式 。 在 互联 网 发 展 初期 网 上 
信息 较 少 的 时 代 , 这 种 做 法 还 是 可 以 接受 的 。 但 现在 即便 是 个 人 站 点 也 包含 着 各 种 各 样 的 
丰富 内 容 , 因 此 如 何 及 时 、 有 效 地 更 新 页 面 信息 成 为 一 个 蝇 待 解决 的 问题 。 

(3) 无 法 实现 动态 显示 效果 。 所 有 的 静态 页 面 都 是 事先 编写 好 的 ,是 一 成 不 变 的 ,因此 
访问 同一 页 面 的 用 户 看 到 的 都 将 只 是 相同 的 内 容 , 静 态 页 面 无 法 根据 不 同 的 用 户 做 不 同 的 
页 面 显示 。 

静态 页 面 的 上 述 不 足 之 处 ,促使 Web 技术 进入 了 发 展 的 第 二 阶段 即 动态 网 页 的 应 用 。 


1.2.2 DHTML 


DHTML 即 动态 的 HTML 语言 (Dynamic HTML)。 除 了 具有 HTML 语言 的 一 切 性 
质 外 ,其 最 大 的 突破 就 是 可 以 实现 在 下 载 网 页 后 仍然 能 实时 变换 页 面 元 素 效果 、 使 人 们 在 浏 
览 Web 页 面 时 看 到 五 彩 缤纷 .绚丽 夺目 的 动态 效果 。DHTML 并 不 是 一 门 新 的 语言 , 它 是 
以 下 技术 标准 或 规范 的 一 种 集成 : 

(1) HTML 4.0; 

(2) CSS(Cascading Style Sheets, 层 到 样式 单 ) ; 

(3) CSSL(Client-Side Scripting Language ,客户 端 脚 本 语言 ,例如 JavaScript 语言 ); 

(4) HTML DOM(HTML Document Object Model, HTML 文档 对 象 模型 ) 。 

CSS 是 HTML 的 辅助 设计 规范 ,用 来 弥补 HTML 在 页 面 布局 和 排版 上 受 限制 所 导致 
的 不 足 , 它 是 DOM 的 一 部 分 。 通 过 CSSL 可 动态 改变 CSS 属性 从 而 做 出 任何 你 想 要 的 页 
面 视觉 效果 。 

CSSL 主要 有 Netscape 公司 的 JavaScript 语言 (JS)、 微 软 公司 的 VBScript(VBS) 和 
JScript。VBS 是 微软 Visual Basic 语言 的 子 集 ; JS 并 不 是 Sun 公司 Java 语言 的 子 集 , 它 属 
于 Netscape 公司 ,但 JS 与 Java 语法 通用 。JS 与 JScript 相通 ,只 是 版 权 分 属 不 同 公司 。 
Netscape 浏览 器 主要 支持 JS; 正则 同时 支持 JS、VBS 和 JScript。 由 于 大 多 数 浏 览 器 都 支 
持 JS, 所 以 Web 开发 者 大 多 使 用 JS 语言。 用 户 可 通过 这 些 语言 编程 来 控制 HTML 标记 
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HTML DOM 是 W3C 极力 推广 的 Web 技术 标准 之 一 , 它 将 网 页 中 的 所 有 HTML 标 
记 抽 象 成 对 象 , 每 个 对 象 拥 有 各 自 的 属性 (Properties) 方法 (Method) 和 事件 (Events) , 它 
们 可 以 通过 CSSL 来 进行 控制 。 所 有 HTML 标记 中 的 元 素 (包括 文本 和 属性 ) 都 可 以 通过 
DOM 访问 ,可 以 动态 创建 新 的 HTML 元 素 ,页 面 显示 内 容 可 以 被 删除 或 修改 。IE 和 
Netscape 的 对 象 模 型 都 是 以 W3C 公布 的 DOM 为 基准 ,加 上 自己 的 扩展 对 象 (Extended 
Object) 来 生成 的 。 微 软 将 HTML DOM 称 为 动态 HTML 对 象 模型 (Dynamic HTML 
Object Model) 。 

采用 DHTML 可 以 实现 如 下 功能 : 

(1) 动态 交互 功能 ,使 用 户 的 Web 页 面 产生 动态 效果 而 显得 光彩 夺目 、 生 机 孝 勃 。 

(2) 让 用 户 的 站 点 更 容易 维护 。 

(3) 可 减轻 服务 器 的 负担 ,更 大 地 发 挥 网 络 能 力 。 

简单 地 说 ,要 实现 DHTML ,就 是 以 HTML 为 基础 (使 用 HTML 来 指定 Web 页 面 元 
素 , 如 标题 .段落 和 表格 等 ) ,运用 DOM 将 页 面 元 素 对 象 化 (使 用 脚本 语言 来 操作 这 些 页 面 
元 素 ,真正 使 Web 页 面 元 素 产 生动 态 效果 ) ,利用 CSSL 控制 这 些 对 象 的 CSS 属性 (使 用 
CSS 来 确定 浏览 器 如 何 绘制 这 些 元 素 , 如 页 面 的 大 小 .颜色 .位 置 等 ) 以 达到 网 页 的 动态 视 
党 效果 。DHTML 已 经 成 为 Web 开发 必须 掌握 的 一 种 技术 。 


1.2.3 Java Applet 


Java Applet(Java 小 应 用 程序 ) 是 指 用 Java 编写 的 能 够 在 Web 页 中 运行 的 应 用 程序 ， 
它 的 可 执行 代码 为 class 文件 。 它 具有 安全 功能 强 和 跨 平台 等 特性 。IE、Netscape 等 主流 
浏览 器 都 能 显示 包含 Applet 的 页 面 。 

Applet 是 从 远程 服务 器 上 下 载 到 本 地 客户 机 上 运行 的 ,出 于 安全 的 考虑 ,对 它 的 运行 
进行 了 必要 的 限制 。 例 如 不 能 运行 本 地 机 上 的 程序 ,只 能 与 它 所 对 应 的 服务 器 联系 ; 无 法 
对 本 地 机 上 的 文件 进行 读 写 操作 ; 除了 可 获取 本 地 机 使 用 的 Java 版 本 号 .操作 系统 名 称 及 
版 本 号 ,文件 名 分 隔 符 、 文 件 路 径 外 ,无 法 获得 本 地 机 的 其 他 信息 。 

Java Applet 可 提供 动画 、 音 频 和 音乐 等 多 媒体 服务 ,并 能 产生 原本 只 有 CGI 公共 网 关 
接口 ) 才 能 实现 的 功能 。 因 此 Java Applet 已 经 成 为 Web 技术 的 重要 组 成 部 分 。 


1.2.4 JavaScript 与 VBScript 


JavaScript 是 目前 使 用 最 广泛 的 脚本 语言 , 它 是 由 Netscape 公司 开发 并 随 Navigator 
浏览 器 一 起 发 布 的 ,是 一 种 介 于 Java 与 HTML 之 间 、 基 于 对 象 的 事件 驱动 的 编程 语言 。 使 
用 JavaScript, 不 需要 Java 编译 器 ,而 是 直接 在 Web 浏览 器 中 解释 执行 。 

JavaScript 语言 在 早期 被 Netscape 的 开发 者 们 称 为 Mocha 语言 ,在 一 次 Beta 测试 时 ， 
名 字 改 为 LiveScript。Sun 公司 推出 Java 之 后 ,Netscape 引进 了 Sun 的 有 关 概 念 ,将 自己 原 
有 的 LiveScript 更 名 为 JavaScript, 它 不 仅 支持 Java 的 Applet 小 程序 ,同时 向 Web 开发 者 
提供 一 种 嵌入 HTML 文档 进行 编程 的 、 基 于 对 象 的 Script 程序 设计 功能 。 

虽然 JavaScript 采用 的 许多 结构 与 Java 相似 ,但 两 者 有 着 根本 的 不 同 。Java 是 面向 对 
象 的 程序 设计 语言 ,JavaScript 则 是 一 种 脚本 语言 , 蚌 一 种 基于 对 象 的 、 面 向 非 程 序 设 计 人 
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员 的 编程 语言 。 和 Java 不 同 ,JavaScript 没有 提供 抽象 继承、 多 态 等 有 关 面 向 对 象 程序 设 
计 语 言 的 许多 功能 。JavaScript 源 代 码 无 须 编 译 , 嵌 入 HTML 文档 中 的 JavaScript 源 代码 
实际 上 是 作为 HTML 页 面 的 一 部 分 存在 的 。 浏 览 器 浏览 包含 JavaScript 源 代码 的 HTML 
页 面 时 ,由 浏览 器 自 带 的 脚本 引擎 对 该 HTML 文档 进行 分 析 、 识别、 解释 ,并 执行 用 
JavaScript 编写 的 源 代 码 。 而 Java 则 不 同 ,Java 源 代码 必须 经 编译 、 连 接 后 才能 运行 。 

VBScript 脚本 语言 是 Visual Basic Script 的 简称 ,有 时 也 被 缩写 为 VBS, 它 是 
Microsoft Visual Basic 的 一 个 子 集 , 即 可 以 看 作 是 VB 语言 的 简化 版 。VBS 和 JavaScript 
一 样 都 用 于 创建 客户 方 的 脚本 程序 ,并 处 理 页 面 上 的 事件 及 生成 动态 内 容 。VBScript 的 最 
大 优点 在 于 简单 易学 , 它 去 掉 了 Visual Basic 中 使 用 的 大 多 数 关 键 字 ,而 仅 保留 了 其 中 少量 
的 关键 字 , 大 大 简化 了 Visual Basic 的 语法 ,使 得 这 种 脚本 语言 更 加 易学 易 用 ,也 为 原先 熟 
悉 VB 语言 的 开发 人 员 减 轻 了 学 习 其 他 语言 的 负担 。 但 很 多 浏览 器 不 支持 VBS, 因 此 在 
Web 开发 中 使 用 JavaScript 的 居多 。 


1.2.5 ActiveX 


ActiveX 控件 是 由 软件 提供 商 开 发 的 可 重用 的 软件 组 件 。 它 是 微软 公司 提出 的 一 种 软 
件 技术 。ActiveX 控件 可 用 于 拓展 Web 页 面 的 功能 ,创建 丰富 的 Internet 应 用 程序 。 开 发 
人 员 可 直接 使 用 已 有 的 大 量 商 用 或 免费 ActiveX 控件 ,也 可 通过 各 种 编程 工具 如 VC、VB、 
Delphi 等 根据 控件 所 要 实现 的 功能 进行 组 件 开 发 。Web 开发 者 无 须知 道 这 些 组 件 是 如 何 
开发 的 ,一 般 情况 下 不 需要 自己 编程 ,就 可 完成 使 用 ActiveX 控件 的 网 页 设计 。 例 如 
ActiveX 控件 ActiveMovie 可 用 于 播放 视频 与 动画 ,你 只 需要 在 控件 的 属性 中 指定 参数 值 ， 
就 可 在 Web 页 面 中 控制 其 播放 。 现 在 很 多 浏览 器 包括 IE、Netscape、Firefox 等 都 支持 
ActiveX 技术 。 

当 用 户 浏览 的 网 页 遇 到 含有 ActiveX 控件 的 网 页 时 ,首先 检查 用 户 的 本 地 系统 注册 , 查 
看 该 组 件 是 否 已 经 安装 在 本 地 机 上 了 。 如 果 该 组 件 已 经 在 本 地 机 上 ,浏览 器 显示 该 网 页 并 
激活 控件 。 如 果 控 件 还 未 在 用 户 本 地 安装 ,浏览 器 将 自动 根据 开发 者 创建 网 页 时 的 地 址 定 
义 , 从 网 上 找到 此 控件 ,并 将 它 安装 到 本 地 机 上 。 当 一 个 组 件 需 要 下 载 时 ,浏览 器 会 缺 省 地 
显示 一 个 消息 框 ,通知 用 户 将 要 开始 下 载 ,用 户 可 以 选择 终止 下 载 或 继续 下 载 。 如 果 控 件 做 
过 数字 签名 ,会 提供 一 份 数字 认证 书 , 其 中 包括 提供 该 控件 的 软件 供应 商 名 字 , 以 及 确认 该 
控件 未 被 破坏 的 有 关 人 信息。 软件 开 发 者 在 开发 控件 时 可 以 加 入 数字 签名 。 签 名 信息 由 控件 
本 身 携带 ,因此 在 下 载 之 前 ,系统 会 自动 显示 数字 验证 书 ,在 网 页 上 使 用 该 控件 的 用 户 不 需 
要 做 任何 开发 工作 。 如 果 和 希望 创建 复杂 的 程序 (例如 用 户 安全 登录 验证 ) 并 在 Web 页 面 运 
行 , 便 有 必要 考虑 用 ActiveX 控件 来 扩展 Web 应 用 。 


1.256 "CGI 


CGI(Common Gateway Interface, 公 共 网 关 接 口 ) ,是 用 于 连接 Web 页 面 和 应 用 程序 的 
接口 。 由 于 HTML 语言 本 身 的 功能 是 比较 贫乏 的 ,难以 完成 诸如 访问 数据 库 等 一 类 的 操 
作 ,而 实际 的 情况 则 是 经 常 需要 先 对 数据 库 进 行 操作 (比如 文件 检索 系统 ) ,然后 把 访问 的 结 
果 动 态 地 显示 在 主页 上 。 此 类 需求 只 用 HTML 是 无 法 做 到 的 ,所 以 CGI 便 应 运 而 生 。 
CGI 是 在 Web Server 端 运行 的 一 个 可 执行 程序 ,由 主页 的 一 个 超 链接 激活 进行 调用 ,并 对 
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该 程序 的 返回 结果 进行 处 理 后 ,显示 在 页 面 上 。 简 而 言 之 ,CGI 就 是 为 了 扩展 页 面 的 功能 而 
设立 的 。CGI 程序 可 以 用 VB、Delphi、C/C++ 或 Perl 语言 (Practical Extraction and Report 
Language ,文字 分 析 报 告 语言 ) 等 来 编写 。CGI 已 得 到 了 广泛 的 应 用 ,例如 网 易 、Sohu 等 网 
站 的 搜索 引擎 用 的 就 是 CGI 技术。 但 CGI 编制 方式 比较 困难 而 且 效 率 低下 ,因为 你 每 一 次 
修改 程序 都 必须 重新 将 CGI 程序 编译 成 可 执行 文件 。 另 外 每 一 个 网 上 客户 在 访问 CGI 程 
序 的 时 候 , 服 务 器 都 要 单独 建立 应 用 进程 ,加 重 了 服务 器 的 负荷 ,会 大 大 影响 服务 器 的 工作 
性 能 。 基 于 上 述 原 因 , 此 后 ,诸如 IDC(Internet Database Connector)、ASP(Active Server 
Pages) 、ISAPI (Internet Server Application Programming Interface), NSAPI (Netscape 
Server Application Programming Interface) 等 技术 也 发 展 起 来 了 ,它们 的 目的 是 相同 的 ,只 
是 编写 起 来 更 容易 \ 性 能 更 好 、 功 能 更 丰富 。 


:2257 PHP 


PHP(Hypertext Preprocessor, 超 文本 预 处 理 器 ,也 称 Professional Home Page) 是 利用 
服务 器 端 脚 本 创建 动态 网 站 的 技术 , 它 包 括 了 一 个 完整 的 编程 语言 支持 因特网 的 各 种 协 
议 、 提 供与 多 种 数据 库 直接 互联 的 能 力 ,包括 MySQL、 SQL Server、 Sybase、 Informix、 
Oracle 等 ,还 能 支持 ODBC 数据 库 连接 方式 。 它 于 1995 年 发 布 第 一 版 本 ,最 新 版 本 为 PHP 
5.4(http: //www. php. net)。 可 采用 HTML 内 内 式 语言 编写 PHP 脚本 程序 。PHP 语言 
独特 的 语法 混合 了 C、Java、Perl 以 及 PHP 式 的 新 语法 ,具备 丰富 的 函数 库 、 多 种 数据 类 型 
和 复杂 的 文本 处 理 功能 ,能 处 理 XML 等 ,支持 面向 对 象 技术 , 它 可 比 CGI 更 快速 地 执行 动 
态 网 页 。 

PHP 也 是 一 种 跨 平 台 的 技术 ,在 大 多 数 UNIX 平台 .GUNV/Linux 和 微软 Windows 平 
人 台 上 均 可 以 运行 。 PHP 脚本 程序 需要 在 Apache、Tomcat 和 JBoss 等 Web 服务 器 上 运行 ， 
因此 一 般 认 为 “Linux 操作 系统 十 PHP 十 MySQL (数据库 ) 十 Tomcat 十 Apache 十 
Dreamweaver” 是 开发 和 运行 一 个 中 小 型 企业 网 站 系统 的 黄金 组 合 ,网 站 的 运行 效率 佳 , 安 
全 性 高 ,可 靠 性 和 稳定 性 也 非常 好 。 

PHP 的 优点 是 安装 方便 学习 过 程 简单 ,数据库 连接 方便 ,兼容 性 强 .扩展 性 强 、 可 以 进 
行 面向 对 象 编程 。 由 于 它 的 源 代码 完全 公开 ,在 Open Source( 开 源 ) 的 大 潮 中 ,不 断 有 新 的 
函数 库 加 入 并 持续 更 新 ,使 得 PHP 无 论 在 UNIX/Linux 或 是 Windows 平台 上 都 受到 更 多 
用 户 的 青睐 。 


258 JSP 


JSP(Java Server Page) 是 由 Sun 公司 于 1999 年 推出 的 一 项 因特网 应 用 开发 技术 ,是 基 
于 Java Server 以 及 整个 Java 体系 的 Web 开发 技术 ,利用 这 一 技术 可 以 建立 先进 、 安 全 和 跨 
平台 的 动态 网 站 。JSP 技术 是 以 Java 语言 作为 脚本 语言 的 ,使 用 JSP 标识 或 者 Java Servlet 
小 脚本 来 生成 页 面 上 的 动态 内 容 。JSP 页 面 看 起 来 像 普 通 HTML 页 面 ,但 它 允 许 租 入 服务 
器 执行 代码 。 服 务 器 端的 JSP 引擎 解释 JSP 标识 和 小 脚本 ,生成 所 请 求 的 内 容 , 并 且 将 结 
果 以 HTML 页 面 形式 发 送 回 浏览 器 。 在 数据 库 操 作 上 ,JSP 可 通过 JDBC 技术 连接 数 
据 库 。 

Java Servlet 是 一 种 开发 Web 应 用 的 理想 构架 。JSP 以 Servlet 技术 为 基础 在 许多 方 
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面 作 了 改进 。 利 用 跨 平台 运行 的 JavaBean 组 件 ,JSP 为 分 离 处 理 逻 辑 与 显示 样式 提供 了 卓 
越 的 解决 方案 。JavaBean 是 一 种 基于 Java 的 软件 组 件 。JSP 对 于 在 Web 应 用 中 集成 
JavaBean 组 件 提供 了 完善 的 支持 。 这 种 支持 不 仅 能 缩短 开发 时 间 ,也 为 JSP 应 用 带 来 了 更 
多 的 可 伸缩 性 。JavaBean 组 件 可 以 用 来 执行 复杂 的 计算 任务 ,或 负责 与 数据 库 的 交互 以 及 
数据 提取 等 。JSP 可 以 通过 JavaBean 等 技术 实现 内 容 的 产生 和 显示 相 分离 , 并 且 JSP 可 以 
使 用 JavaBeans 或 者 EJB(Enterprise JavaBeans) 来 执行 应 用 程序 所 要 求 的 更 为 复杂 的 处 
理 , 进 而 完成 企业 级 的 分 布 式 的 大 型 应 用 。 

JSP 本 身 虽 然 也 是 脚本 语言 ,但 是 却 和 PHP、ASP 有 着 本 质 的 区 别 。PHP 和 ASP 都 
是 由 语言 引擎 解释 执行 程序 代码 ,而 JSP 代码 却 被 编译 成 Servlet 并 由 Java 虚拟 机 执行 ,这 
种 编译 操作 仅 在 对 JSP 页 面 的 第 一 次 请 求 时 发 生 。 因 此 普遍 认为 JSP 的 执行 效率 比 PHP 
和 ASP 都 高 。 

绝 大 多 数 JSP 页 面 依赖 于 可 重用 的 和 跨 平台 的 组 件 。 跨 平台 应 用 是 JSP 的 最 大 特色 。 
作为 Java 平台 的 一 部 分 ,JSP 拥有 Java 编程 语言 “一 次 编写 ,各 处 运行 ”的 特点 。 随 着 越 来 
越 多 的 供应 商 将 JSP 支持 添加 到 他 们 的 产品 中 ,开发 人 员 可 以 自由 选择 服务 器 和 开发 工 
具 , 更 改 工具 或 服务 器 并 不 影响 当前 的 应 用 。 不 少 大 型 企业 都 使 用 JSP 技术 构建 相关 业务 
系统 。 


1.2.9 ASP/ASP.NET 


ASP(Active Server Pages, 动 态 服 务 器 页 面 ), 是 微软 公司 1996 年 11 月 推出 的 Web 应 
用 程序 开发 技术 , 它 既 不 是 一 种 程序 语言 ,也 不 是 一 种 开发 工具 ,而 是 一 种 技术 框架 , 它 含 有 
若干 内 建 对 象 , 用 于 Web 服务 器 端的 开发 。 利 用 它 可 以 产生 和 执行 动态 的 .互动 的 和 高 性 
能 的 Web 应 用 程序 。ASP 使 用 VBScript JavaScript 等 简单 易 懂 的 脚本 语言 ,结合 HTML 
代码 , 即 可 快速 地 完成 网 站 的 应 用 程序 开发 。 使 用 普通 的 文本 编辑 器 ,如 Windows 的 记事 
本 , 即 可 进行 编辑 设计 ,ASP 的 程序 编制 比 HTML 更 方便 旦 更 有 灵活 性 。 它 们 在 Web 服 
务 器 端 运行 ,运行 后 再 将 运行 结果 以 HTML 格式 传送 至 客户 端的 浏览 器 。 因 此 ASP 与 一 
般 的 脚本 语言 相 比 ,要 安全 得 多 。 客 户 端 只 要 使 用 可 执行 HTML 代码 的 浏览 器 , 即 可 浏览 
ASP 所 设计 的 网 页 内 容 。 此 外 , 它 可 通过 内 置 的 组 件 实现 更 强大 的 功能 ,如 使 用 ADO 
(ActiveX Data Object) 可 以 轻松 地 访问 数据 库 。ASP 技术 局 限于 微软 的 操作 系统 平台 ,不 
能 在 跨 平台 的 Web 服务 器 上 工作 。 

ASP.NET 是 ASP 的 下 一 代 版 本 ,然而 ASP.NET 又 并 非 从 ASP 3. 0 自然 演化 而 来 ， 
也 不 是 ASP 的 简单 升级 ,而 是 全 新 一 代 的 动态 网 页 实现 系统 ,是 微软 发 展 的 新 体系 结构 
.NET 的 一 部 分 ,是 ASP 和 . NET 技术 的 结合 。ASP. NET 可 提供 基于 组 件 . 事 件 驱动 的 
可 编程 Web 窗 体 , 大 大 简化 了 编程 过 程 .此 外 还 可 以 用 ASP. NET 建立 Web 服务 。 在 许多 
方面 ,ASP. NET 与 ASP 有 着 本 质 的 不 同 。ASP. NET 完全 基于 模块 与 组 件 ,具有 更 好 的 
可 扩展 性 与 可 定制 性 ,数据 处 理 方 面 更 是 引入 了 许多 激动 人 心 的 新 技术 , 正 是 这 些 具 有 
革命 性 意义 的 新 特性 ,让 ASP. NET 远 远 超越 了 ASP, 同 时 也 提供 给 Web 开发 人 员 更 好 
的 灵活 性 ,有 效 缩短 了 Web 应 用 程序 的 开发 周期 。ASP. NET 与 Windows Server 家 族 的 
完美 组 合 为 中 小 型 乃至 企业 级 的 Web 商业 模型 提供 了 一 个 更 为 稳定 、 高 效 、 安 全 的 运行 
环境 。 
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目前 仍 有 许多 网 站 采用 ASP 技术 开发 ,那么 读者 也 许 想 知道 究 况 用 ASP 还 是 ASP. 
NET 开发 网 站 为 好 ? 

到 目前 为 止 ,ASP 用 来 开发 网 站 已 有 十 来 年 之 久 , 期 间 无 数 开发 者 积累 了 大 量 的 开发 
经 验 ,编写 了 大 量 可 重用 的 组 件 、 代 码 以 及 网 站 自动 生成 工具 等 ,因此 对 于 一 般 的 网 站 开发 ， 
选择 ASP 可 以 在 较 短 时 间 内 完成 系统 的 开发 。 但 用 ASP 开发 的 网 站 在 安全 性 、 运 行 效率 、 
用 户 体验 方面 存在 着 巨大 差异 ,例如 用 ASP 开发 的 网 站 不 可 以 编译 运行 ; 完成 相同 的 功能 
需要 编写 多 个 页 面 ; ASP 脚本 程序 和 HTML 混杂 在 一 起 ,做 不 到 后 台 代 码 与 页 面 显示 代 
码 的 分 离 ,等 等 。 因 此 用 ASP. NET 代替 陈旧 的 ASP 是 大 势 所 趋 。 下 面 介绍 ASP 与 ASP. 
NET 的 主要 区 别 。 

1. 开发 语言 不 同 

ASP 仅 局 限于 使 用 脚本 语言 来 开发 ,用 户 给 Web 页 中 添加 ASP 代码 的 方法 与 客户 端 
脚本 中 添加 代码 的 方法 相同 ,导致 代码 杂乱 ,维护 困难 。ASP. NET 把 界面 设计 和 程序 设计 
以 不 同 的 文件 分 离开 , 复 用 性 和 维护 性 得 到 了 提高 。ASP. NET 允许 用 户 选择 并 使 用 功能 
完善 的 编程 语言 ,也 允许 使 用 潜力 巨大 的 . NET Framework。 

2. 运行 机 制 不 同 ,性 能 大 幅 提高 

ASP 是 解释 运行 的 编程 框架 ,所 以 执行 效率 较 低 。ASP. NET 是 编译 性 的 编程 框架 ， 
运行 的 是 服务 器 上 编译 好 的 CLR( 公 共 语 言 运行 时 ) 库 代码 ,可 以 利用 早期 绑 定 、 实 时 编译 
来 提高 效率 。 另 外 ASP. NET 消除 了 ASP 所 存在 的 代码 安全 性 问题 。 

表 1-1 列 出 了 CGI、PHP、JSP、ASP、ASP. NET 几 种 技术 之 间 的 对 比 。 


表 1-1 CGI、PHP、JSP、ASP、ASP.NET 技术 对 比 


W 技术 CGI PHP JSP ASP ASP. NET 
评价 指标 
操作 系统 均 可 均 可 均 可 Windows Windows 
Web 服务 器 均 可 数 种 数 种 IIS IIS 
执行 效率 慢 (编译 后 执行 ) | 快 (解释 执行 ) | 快 (一 次 编译 ) | 较 快 (解释 执行 ) | 快 (编译 后 执行 ) 
稳定 性 最 高 佳 中 等 中 等 很 高 
开发 时 间 中 等 短 短 短 较 短 
修改 时 间 中 等 短 短 短 较 短 
程序 语言 不 限 PHP Java VB/JScript VB. NET/C#/J# 
网 页 结合 差 佳 佳 佳 极 佳 
学 习 门 槛 高 低 低 低 低 
函数 支持 不 定 多 少 少 很 多 
系统 安全 最 好 好 好 差 很 好 
使 用 网 站 (大 型 ) | 很 少 少 多 少 多 
使 用 网 站 (中 小 型 )| 很 少 多 多 多 多 
改版 速度 无 快 慢 快 很 快 
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1.2.10 XML 


SGML 和 HTML 都 是 非常 成 功 的 标记 语言 ,但 它们 在 某 些 方面 存在 着 与 生 俱 来 的 缺 
陷 。SGML 为 语法 标记 提供 了 蜡 常 强大 的 工具 ,同时 具有 极 好 的 扩展 性 ,在 分 类 和 索引 数 
据 中 非常 有 用 。 但 SGML 非常 复杂 , 且 价 格 昂贵 , 几 个 主要 的 浏览 器 厂商 都 明确 拒绝 支持 
SGML, 使 SGML 在 网 上 传播 遇 到 了 很 大 障碍 。 相 反 ,HTML 免费 .简单 ,在 世界 范围 内 得 
到 了 广泛 的 应 用 。 它 侧重 于 页 面 表现 形式 的 描述 ,大 大 丰富 了 页 面 的 视觉 .听觉 效果 ,为 推 
动 WWW 的 莲 才 发展 ,推动 信息 和 知识 的 网 上 交流 发 挥 了 不 可 取代 的 作用 。 但 HTML 也 
有 如 下 几 个 致命 的 弱点 : 

(1) HTML 是 专门 为 描述 页 面 表现 形式 而 设计 的 , 它 牙 于 对 信息 语义 及 其 内 部 结构 的 
描述 ,不 能 适应 日 益 增 多 的 信息 检索 要 求 和 存档 要 求 。 

(2) HTML 对 表现 形式 的 描述 能 力 实际 上 也 还 非常 不 够 , 它 无 法 描述 矢量 图 形 、 科 技 
符号 和 一 些 其 他 特殊 显示 效果 。 

(3) HTML 的 标记 集 日 益 腾 肿 ,而 其 松散 的 语法 要 求 使 得 文档 结构 混乱 而 缺乏 条 理 ， 
导致 浏览 器 的 设计 越 来 越 复 杂 ,降低 了 浏览 的 时 间 效 率 与 空间 效率 。 

这 些 弱 点 逐渐 成 为 HTML 继续 发 展 应 用 的 障碍 。1996 年 人 们 开始 致力 于 构建 一 个 标 
记 请 言 , 它 既 具 有 SGML 的 强大 功能 和 可 扩展 性 ,同时 又 具有 HTML 的 简单 性 。XML 
(eXtensible Markup Language, 可 扩展 的 标记 语言 ) 就 这 样 诞生 了 。 

设计 XML 的 动机 就 是 要 克服 HTML 的 种 种 不 足 ,将 网 络 上 传输 的 文档 规范 化 ,并 赋 
予 标记 一 定 的 含义 ,与 此 同时 ,还 要 保留 其 简捷 、 适 于 网 上 传输 和 浏览 的 优点 。XML 不 但 
是 标记 请 言 ,而 且 提 供 了 一 个 标准 ,利用 这 个 标准 ,可 以 根据 实际 需要 , 自 定义 新 的 标记 语 
言 , 并 为 这 个 标记 语言 规定 它 特 有 的 一 套 ppp 
标记 。 文件 (E) 网 回 (E) ”查看 (V) 收藏 和 工具 (D 帮助 (t) 


XML 已 在 文件 配置 ,数据 存储 、 异 构 数 |- 
~ <book> 


据 交 换 ,基于 Web 的 B2B 交易 (电子 商务 订 < 书 名 > 基于 XML 的 ASP.NET 开 发 </ 书 各 > 


< 定价 >42</ 定 价 > 


单 ebXML、 金 融 交 易 IFX 等 ) ,存储 向 量 图 形 | 。 -RN "5 人 
~ cbook> 


(VML) 描述 分 子 结构 、 编 码 并 显示 DNA/ < 书 和 名 >xML 记 用 的 UML 建 横 技 术 </ 书 各 > 


< 定价 >32</ 定 价 > 


RNA、 蛋 白质 串 接 信息 等 众多 方面 得 到 广泛 < 作者 >David Carlson/ 局 请 做 严 前 沈 金 河 等 </ 作 者 > 


</book> 
应 用 。 本 书 第 5 章 将 详细 介绍 XML 的 相关 | 了 32 
</root> 一 
技术 及 其 应 用 开发 。 同一 一 一 一 
【 例 1.2】 以 下 是 一 个 简单 的 XML 文 


档 book. xml, 存 放 在 C: \Inetpub\wwwroot 
下 ,在 浏览 器 中 显示 效果 如 图 1-9 所 示 。 


图 1-9 book. xml 在 浏览 器 中 显示 效果 


<?xml version = "1.0" encoding = "GB2312" ?> 
< root> 
< book> 
< 书 名 > 基于 XML 的 ASP. NET 开发 </ 书 名 > 
< 定价 > 42 </ 定 价 > 
< 作者 > Dan Wahlin/ 王 宝 良 </ 作 者 > 
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</book> 
<book> 
< 书 名 > XML 应 用 的 UML 建 模 技术 </ 书 名 > 
< 定价 > 32 </ 定 价 > 
< 作者 > David Carlson/ 周 靖 侯 亦 萌 沈 金 河 等 </ 作 者 > 
</book> 
<book> 
< 书 名 > 极限 编程 研究 </ 书 名 > 
< 定价 > 70 </ 定 价 > 
< 作者 > Giancarrio Succi/Michele Marchesi/ 张 辉 ( 译 )</ 作 者 > 
</book> 
<book> 
< 书 名 > Design Patterns </ 书 名 > 
< 定价 > 38 </ 定 价 > 
< 作者 > Erich Gamma/Richard Helm/Ralph Johnson/John Vlissides </ 作 者 > 
</book> 
</root> 


1.2.11 XHTML 


XHTML 是 Extensible HyperText Markup Language( 可 扩展 超 文本 标记 语言 ) 的 缩 
写 。HTML 是 一 种 基本 的 Web 的 网 页 设计 语言 ,XHTML 是 一 个 基于 XML 的 标记 语言 ， 
看 起 来 与 HTML 有 些 相像 ,只 有 一 些小 的 但 重要 的 区 别 , 就 是 所 有 标记 必须 配对 ,标记 
的 属性 放 在 引号 中 。XHTML 就 是 一 个 扮演 着 类 似 HTML 的 角色 的 XML, 所 以 本 质 上 
说 ,XHTML 是 一 个 过 渡 技 术 , 结 合 了 部 分 XML 的 强大 功能 及 大 多 数 HTML 的 简单 

2000 年 底 ,国际 W3C 组 织 (World Wide Web Consortium) 公 布 发行 了 XHTML 1.0 版 
本 。XHTML 1.0 是 在 HTML 4.0 基础 上 优化 和 改进 的 新 语言 ,目的 自然 是 基于 XML 应 
用 。XML 虽然 数据 转换 能 力 强 大 ,完全 可 以 替代 HTML, 但 面 对 成 千 上 万 已 有 的 基于 
HTML 语言 设计 的 网 站 ,直接 采用 XML 还 为 时 过 早 。 因 此 ,在 HTML 4.0 的 基础 上 ,用 
XML 的 规则 对 其 进行 扩展 ,得 到 XHTML ,实现 HTML 向 XML 的 过 渡 。 在 网 站 设计 中 目 
前 国际 上 推崇 的 Web 标准 就 是 基于 XHTML 的 应 用 。VS 2010 开发 工具 默认 建立 的 
HTML 网 页 即 为 XHTML 格式 的 网 页 。 

【 例 1.3】 以 下 是 一 个 简单 的 XHTML 文档 indexl. htm, 存放 在 C: \ Inetpub\ 
wwwroot 下 ,在 浏览 器 中 显示 效果 如 图 1-10 所 nmi 文 阁 这 TD -lolxl 
示 。 请 比较 例 1. 1 和 例 1. 3 在 标记 方面 的 区 别 。 +F 省 国 国 峡 | 四 扩 外 VW” 
一 div> 标 记 的 配对 标记 是 </div>。 在 HTML 中 国人 cweeowwooiniosnm 加 | 
的 夯 模 线 标记 二 hr 二 在 XHTML 中 变 成 一 hr/ 二 。 ”| 这 蛙 ~ 人 文本 块 标记 
也 即 在 HTML 中 不 配对 的 标记 ,在 XHTML 中 | 
必须 用 */" 结 束 。 标 记 的 属性 ,例如 按钮 标记 中 局 六 方太 三 国王 忆 
的 id 属性 ,在 XHTML 中 必须 放 在 引号 中 ,而 在 
HTML 中 则 可 有 可 无 。 图 1-10 XHTML 文档 indexl. htm 显示 效果 
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<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml11/DTD/xhtm11 - transitional. dtd"> 
< htm] xmlns = "http://www.w3.org/1999/xhtml"> 
< head> 
<title> xhtml 文档 演示 </title> 
</head> 
<body> 
< div> 这 是 一 个 文本 块 标记 </div> 
be 
<hr 人 > 
< input id = "Button1" title= "I am a button" type = "button" value = "button" /> 
</body> 
</htm]l > 


1.2.12 ADO/ADO.NET 


Microsoft ActiveX Data Object(ADO) 使 得 客户 端 应 用 程序 能 够 通过 ODBC (Open 
DataBase Connectivity) ,OLE DB 提供 者 等 方式 来 访问 和 操作 数据 库 服务 器 中 的 数据 。 它 
基于 微软 的 COM 技术 ,是 实现 C/S、B/S 应 用 程序 数据 库 操 作 的 关键 技术 。ADO 最 主要 
的 特点 是 易于 使 用 .速度 快 . 内 存 支 出 少 和 占用 磁盘 空间 较 少 ,但 它 是 面向 连接 的 数据 访问 
方式 , 即 在 操作 数据 库 时 ,必须 连接 数据 库 服务 器 进行 联机 操作 。 当 同时 有 大 量 用 户 对 数据 
库 服 务 器 进行 数据 操作 时 ,会 影响 数据 库 服务 器 性 能 。 

ADO. NET 是 基于 .NET 的 一 种 全 新 的 数据 访问 方式 , 它 是 基于 消息 机 制 的 数据 访问 
方式 。 在 ADO. NET 中 ,数据 源 的 数据 可 以 作为 XML 文档 进行 传输 和 存储 。 在 访问 数据 
的 时 候 ADO. NET 会 利用 XML 制作 数据 的 一 份 副本 ,用 户 可 断 开 与 数据 库 服 务 器 的 连接 
直接 在 副本 上 进行 操作 ,最 后 根据 需要 再 将 副本 中 的 数据 更 新 到 数据 库 服 务 器 。ADO. 
NET 的 这 种 新 的 数据 访问 接口 大 大 提高 了 数据 访问 的 整体 性 能 。 基 于 XML 这 一 特性 决 
定 了 ADO. NET 的 更 广泛 适应 性 。 


1.2.13 Web Service 


Web Service(Web 服务 ) 是 为 实现 “基于 Web 无 颖 集成 ”的 目标 而 提出 的 全 新 概念 , 希 
望 通过 Web Service 能 够 实现 不 同 的 系统 之 间 用 “软件 -软件 对 话 ” 的 方式 相互 调用 ,打破 软 
件 应 用 、 网 站 和 各 种 设备 之 间 格 格 不 入 的 状态 。 

一 个 Web Service 既 可 以 是 一 个 组 件 ( 小 粒度 ) 一 一 该 组 件 必须 和 其 他 组 件 结 合 才能 进 
行 完 整 的 业务 处 理 ,也 可 以 是 一 个 应 用 程序 (大 粒度 ) 一 一 可 以 为 其 他 应 用 程序 提供 支撑 。 
不 管 Web Service 作为 一 个 组 件 还 是 一 个 应 用 程序 , 它 都 会 向 外 界 暴露 一 个 能 够 通过 Web 
进行 调用 的 API, 这 就 是 说 ,能 够 用 编程 的 方法 通过 Web 调用 来 实现 某 个 功能 的 应 用 程序 。 
试 设想 ,公司 可 以 将 某 一 具有 独立 功能 的 软件 形成 Web 服务 放 在 Web 上 , 当 某 用 户 需 要 开 
发 一 个 大 型 软件 时 ,这 些 功 能 不 需要 自己 开发 ,这 部 分 功能 可 直接 通过 某 种 方式 连接 相关 提 
供 Web 服务 的 主机 得 到 。 这 样 一 来 ,你 的 应 用 系统 在 开发 人 力 、 开 发 周期 \ 开 发 成 本 、 维 护 
成 本 等 方面 就 会 大 大 减少 或 降低 。 其 实 Web 上 已 存在 大 量 Web 服务 可 供 使 用 ,例如 发 送 
和 接收 短 消息 功能 、 专 业 加 密 和 解密 功能 、 专 业 报 表 处 理 功 能 、 微 软 的 MapPoint Web 服务 
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等 ,当然 或 许 你 得 为 使 用 这 些 Web 服务 而 付费 。 用 户 在 调用 这 些 Web 服务 时 ,只 需要 提供 
输入 数据 就 可 得 到 返回 的 结果 ,然后 对 返回 的 结果 进行 加 工 即 可 。 软 件 开发 的 一 种 趋势 就 
是 SaaS (Software as a Service, 软 件 即 服务 )。 

Web Service 是 自 包含 、 自 描述 、 模 块 化 的 应 用 ,可 以 在 网 络 中 被 描述 ,发 布 .查找 以 及 
通过 Web 调用 。Web Service 需要 一 套 协 议 来 实现 分 布 式 应 用 程序 的 创建 。 要 实现 互 操 作 
性 , Web Service 还 必须 提供 一 套 标准 的 类 型 系统 ,用 于 沟通 不 同 的 平台 、 编 程 语言 和 组 建 
模型 中 的 不 同类 型 系统 。Web Service 平台 涉及 的 主要 内 容 包括 : 

(1) 采用 与 平台 无 关 \ 厂 商 无 关 的 XML 表示 数据 的 基本 格式 ; 

(2) 采用 W3C 制定 的 XML Schema XSD 定义 作为 标准 的 数据 类 型 ; 

(3) 采用 SOAP(Simple Object Access Protocol ,简单 对 象 访问 协议 ) 作 为 交换 XML 编 
码 信息 的 轻 量 级 协议 ; 

(4) 采用 基于 XML 语言 的 WSDL(Web Service 描述 语言 ) 作 为 Web Service 及 其 函 
数 .参数 和 返回 值 的 描述 文档 ; 

(5) 采用 UDDI(Universal Description ,Discovery and Integration ,统一 描述 发现 和 集 
成 ) 规 范 实现 Web 服务 的 相互 操作 ,例如 可 用 UDDI 实现 Web Service 的 注册 、 查 找 、 调 
用 等 ; 

(6) 用 远程 过 程 调用 RPC 和 消息 传递 实现 和 Web Service 之 间 的 通信 。 

虽然 Web Service 涉及 的 知识 比较 多 ,但 要 开发 一 个 应 用 型 Web Service 并 不 是 太 难 。 


1.2.14 WCF 


WCF(Windows Communication Foundation, Windows 通信 接口 ) 是 由 微软 发 展 的 一 组 
数据 通信 的 应 用 程序 开发 接口 , 它 是 . NET 框架 的 一 部 分 ,由 . NET Framework 3. 0 开始 引 
入 ,与 Windows Presentation Foundation 及 Windows Workflow Foundation 并 列 为 新 一 代 
Windows 操作 系统 以 及 WinFX 的 三 大 重要 应 用 程序 开发 类 别 库 。 

在 .NET Framework 2.0 以 及 之 前 版 本 中 ,微软 发 展 了 Web Service (SOAP with 
HTTP communication)、Net Remoting (TCP/ HTTP/Pipeline communication) 以 及 基础 
的 Winsock 等 通信 支持 ,由 于 各 个 通信 方法 的 设计 方法 不 同 ,而 且 彼 此 之 间 也 有 相互 的 重 
释 性 ,对 于 开发 人 员 来 说 ,不 同 的 选择 会 有 不 同 的 程序 设计 模型 ,而 且 必 须要 重新 学 习 , 让 开 
发 人 员 在 使 用 中 有 许多 不 便 。 同 时 ,面向 服务 架构 SOA (Service Oriented Architecture) 也 
开始 盛行 于 软件 工业 中 ,因此 微软 重新 检视 了 这 些 通信 方法 ,并 设计 了 一 个 统一 的 程序 开发 
模型 ,以 对 数据 通信 提供 最 基本 最 有 弹性 的 支持 ,这 就 是 WCF。WCF 集合 了 几乎 由 . NET 
Framework 所 提供 的 所 有 通信 和 方法。 概括 地 说 ,WCF 具有 以 下 优势 : 

(1) 统一 性 。WCF 是 对 ASMX、 Net Remoting、Enterprise Service、 WSE、MSMQ 等 
技术 的 整合 。 由 于 WCF 完全 是 由 托管 代码 编写 ,因此 开发 WCF 应 用 程序 与 开发 其 他 . Net 
程序 没有 太 大 的 区 别 , 仍 可 像 创 建 面 向 对 象 的 应 用 程序 那样 ,利用 WCF 来 创建 面向 服务 的 
应 用 程序 。 

(2) 互 操作 性 。 由 于 WCF 最 基本 的 通信 机 制 是 SOAP(Simple Object Access Protocol, 简 
易 对 象 访问 协议 ) ,这 就 保证 了 系统 之 间 的 互 操作 性 ,即使 是 运行 在 不 同 的 上 下 文中 。 

(3) 安全 和 可 信赖 。WS-Security、WS-Trust 和 WS-SecureConversation 均 被 添加 到 
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SOAP 消息 中 ,以 用 于 用 户 认证 数据 完整 性 验证 、 数 据 隐私 等 多 种 安全 因素 。 

(4) 兼容 性 。WCF 充分 考虑 到 了 与 旧 有 系统 的 兼容 性 。 安 装 WCF 并 不 会 影响 原 有 的 
技术 如 ASMX 和 . Net Remoting。 即 使 对 于 WCF 和 ASMX 而 言 ,虽然 两 者 都 使 用 了 
SOAP, 但 基于 WCF 开发 的 应 用 程序 , 仍 可 直接 与 ASMX 进行 交互 。 


1.3 Web 发展 历 程 


1.3.1 Web 1.0 时 代 : 早期 Web 


Web 1.0 时 代 是 一 个 群雄 并 起 、 逐 鹿 网 络 的 时 代 , 虽 然 各 个 网 站 采用 的 手段 和 手法 不 
同 ,但 第 一 代 互 联网 有 诸多 共同 的 特征 : 

(1) Web 1.0 大 都 采用 技术 创新 主导 的 模式 ,信息 技术 的 变革 和 使 用 对 于 网 站 的 新 生 
与 发 展 起 到 了 关键 作用 。 新 浪 起 初 就 是 以 技术 平台 起 家 ; 搜狐 以 搜索 技术 起 家 ; 腾讯 以 即 
时 通信 技术 起 家 ; 盛大 以 网 络 游戏 起 家 。 在 这 些 网 站 的 创始 阶段 ,技术 性 的 痕迹 相当 之 重 。 

(2) Web 1.0 的 盈利 大 都 基于 一 个 共通 点 , 即 巨 大 的 点 击 流量 。 无 论 是 早期 融资 还 是 
后 期 获 利 , 依 托 的 都 是 为 数 众多 的 用 户 和 点 击 率 ,以 点 击 率 为 基础 上 市 或 开展 增值 服务 , 受 
众 面 是 否 广泛 ,决定 了 盘 利 的 水 平和 速度 ,充分 体现 了 互联 网 的 眼球 经 济 色彩 。 

(3) Web 1.0 的 发 展 出 现 了 向 综合 门户 合流 现象 ,早期 的 新 浪 、 搜 狐 、 网 易 、 腾 讯 .MSN 
等 纷纷 走向 了 门户 网 站 ,这 一 情况 的 出 现 , 在 于 门户 网 站 本 身 的 盘 利 空间 更 加 广阔 , 熏 利 方 
式 更 加 多 元 化 ,占据 网 站 平台 ,可 以 更 加 有 效 地 实现 增值 意图 ,并 延伸 由 主 营 业务 之 外 的 各 
类 服务 。 

(4) Web 1.0 在 合流 的 同时 ,还 形成 了 主 营 与 兼 营 结合 的 明晰 产业 结构 。 新 浪 以 新 闻 十 
广告 为 主 ,网 易 拓展 游戏 ,搜狐 延伸 门户 矩阵 ,以 主 营 作为 突破 口 ,以 兼 营 作为 补充 点 ,形成 
拳头 加 肉 掌 的 发 展 方式 。 


1.3.2 Web 2.0 时 代 : 全 民 共 建 的 Web 


Web 2.0 是 2003 年 之 后 互联 网 的 热门 概念 之 一 。 一 般 来 说 Web 2.0 是 相对 Web 1.0 
的 新 的 一 类 互联 网 应 用 的 统称 。Web 1.0 的 主要 特点 在 于 用 户 通过 浏览 器 获取 信息 ,Web 2.0 
则 更 注重 用 户 的 交互 作用 ,用 户 既 是 网 站 内 容 的 浏览 者 ,也 是 网 站 内 容 的 制造 者 。 所 谓 网 站 
内 容 的 制造 者 是 说 互联 网 上 的 每 一 个 用 户 不 再 仅仅 是 互联 网 的 读者 ,同时 也 成 为 互联 网 的 
作者 ; 在 模式 上 由 单纯 的 “ 读 ” 向 “ 写 ”" 以 及 “共同 建设 "发展; 由 被 动 地 接收 互联 网 信息 向 主 
动 创造 互联 网 信息 发 展 ; 由 单纯 通过 网 络 浏览 器 浏览 网 页 模式 向 内 容 更 丰富 、 联 系 性 更 强 、 
工具 性 更 强 的 互联 网 模式 的 发 展 ,从 而 更 加 入 性 化 。 

Blogger Don 在 他 的 “Web 2.0 概念 诠释 ”一 文中 提 到 “Web 2.0 是 以 Flickr、Craigslist、 
Linkedin、Tribes、 Ryze、 Friendster、 Del. icio. us、43Things. com 等 网 站 为 代表 ,以 Blog、 
TAG、SNS、RSS、Wiki 等 社会 软件 的 应 用 为 核心 ,依据 六 度 分 隔 `.XML'、Ajax 等 新 理论 和 技 
术 实现 的 互联 网 新 一 代 模 式 ”。 

如 果 说 Web 1.0 是 以 数据 为 核心 的 网 ,那么 Web 2.0 是 以 人 为 出 发 点 的 互联 网 。 从 知 
识 生产 的 角度 看 ,Web 1.0 的 任务 是 将 以 前 没有 放 在 网 上 的 人 类 知识 ,通过 商业 的 力量 , 放 
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到 网 上 去 ; Web 2.0 的 任务 是 ,将 这 些 知识 通过 每 个 用 户 的 浏览 求知 的 力量 ,协作 工作 ,把 
知识 有 机 地 组 织 起 来 ,在 这 个 过 程 中 继续 将 知识 深化 ,并 产生 新 的 思想 火花 。 从 内 容 产 生 者 
角度 看 , Web 1.0 是 商业 公司 为 主体 把 内 容 往 网 上 搬 ; 而 Web 2. 0 则 是 以 用 户 为 主 ,以 简便 
随意 的 方式 把 新 内 容 往 网 上 搬 , 以 实现 信息 共享 。 从 交互 性 看 ,Web 1. 0 是 网 站 对 用 户 为 
主 ; Web 2. 0 是 以 用 户 对 用 户 为 主 。 从 技术 上 看 ,由 于 Ajax 等 技术 的 使 用 , Web 客户 端 工 

下 面 主 要 对 Ajax、Blog( 博 客 ) ,Tag( 网 摘 )、Wiki、RSS 作 简 单 介绍 。 

1. Ajax 

Ajax(Asynchronous JavaScript and XML, 异步 JavaScript 和 XML) 最 早 由 Jesse 
James Garrett 提出 。 区 别 于 传统 的 Web 应 用 ,Ajax 应 用 的 主要 目的 就 是 提高 用 户 体验 ,其 
通过 如 下 方式 实现 : 

。 不 刷新 整个 页 面 ,在 页 面 内 与 服务 器 通信 ; 

。 使 用 异步 方式 与 服务 器 通信 ,不 需要 打 断 用 户 的 操作 ,具有 更 加 迅速 的 响应 能 力 ; 

。 应 用 系统 不 需要 由 大 量 页 面 组 成 。 大 部 分 交互 在 页 面 内 完成 ,不 需要 切换 整个 

页 面 。 

由 此 可 见 ,Ajax 使 得 Web 应 用 更 加 动态 , 带 来 了 更 高 的 智能 ,并 且 可 以 提供 表现 能 力 
丰富 的 Ajax UI 组 件 。 这 一 类 型 的 Web 应 用 叫做 RIA(Rich Internet Application) 应 用 。 

Ajax 并 不 是 一 门 新 的 语言 或 技术 , 它 实际 上 是 几 项 技术 按 一 定 的 方式 组 合 在 一 起 共同 
协作 ,发 挥 各 自 的 作用 ,包括 : 

。 用 XHTML 和 CSS 实现 网 页 显示 ; 

。 用 DOM 实现 动态 显示 和 交互 ; 

。 用 XML 和 XSLT 进行 数据 交换 与 处 理 ; 

。 用 XMLHttpRequest 进行 异步 数据 读 取 ; 

。 用 JavaScript 绑 定 和 处 理 所 有 数据 。 

Ajax 的 工作 原理 相当 于 在 用 户 和 服务 器 之 间 加 了 一 个 中 间 层 ,使 用 户 操作 与 服务 器 响 
应 异步 化 。Ajax 是 传统 Web 应 用 程序 的 一 个 转变 。 在 旧 的 交互 方式 中 ,由 用 户 触发 一 个 
HTTP 请 求 到 服务 器 ,服务 器 对 其 进行 处 理 后 再 返回 一 个 新 的 HTML 页 面 到 客户 端 ,每 当 
服务 器 处 理 客户 端 提交 的 请 求 时 ,客户 都 只 能 空闲 等 待 ,并 且 哪 怕 只 是 一 次 很 小 的 交互 ,只 
需 从 服务 器 端 得 到 很 简单 的 一 个 数据 ,都 要 返回 一 个 完整 的 HTML 页 面 ,用 户 每 次 都 要 浪 
费时 间 和 带宽 去 重新 读 取 整个 页 面 。 而 使 用 Ajax 后 用 户 感觉 几乎 所 有 的 操作 都 会 很 快 响 
应 ,没有 页 面 重 载 的 等 待 。Ajax 可 以 作为 客户 端 和 服务 器 的 中 间 层 来 处 理 客户 端的 请 求 ， 
并 根据 需要 向 服务 器 端 发 送 请 求 ,用 什么 就 取 什 么 、 用 多 少 就 取 多 少 , 不 存在 数据 的 元 余 和 浪 
费 , 减 少 了 数据 的 下 载 总 量 ,而 且 更 新 页 面 时 不 用 重 载 全 部 内 容 , 只 更 新 需要 更 新 的 那 部 分 即 
可 ,相对 于 纯 后 台 处 理 并 重 载 的 方式 Ajax 缩短 了 用 户 等 待 时 间 , 也 把 对 资源 的 浪费 降 到 最 低 。 

2. Blog 


为 “博客 ”"。Blog 是 一 个 易于 使 用 的 网 站 ,个 人 可 以 在 其 中 迅速 发 布 想法 .与 他 人 交流 以 及 
从 事 其 他 活动 ,所 有 这 一 切 都 是 免费 的 。 
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在 网 络 上 发 表 博 客 的 构想 起 于 1998 年 ,但 到 了 2000 年 才 真正 开始 流行 。 一 个 博客 
(blog) 就 是 一 组 网 页 , 它 通常 是 由 简短 且 经 常 更 新 的 Post (张贴 的 文章 ) 所 构成 的 ; 这 些 
Post 按照 年 份 和 日 期 排列 。 博 客 的 内 容 和 目的 有 很 大 的 不 同 ,从 对 其 他 网 站 的 超级 链接 和 
评论 ,有 关公 司 、 个 人 、 构 想 的 新 闻 到 日 记 、 照 片 、 诗 歌 . 散 文 ,甚至 科幻 小 说 的 发 表 或 张贴 , 涉 
及 各 行 各 业 。 撰 写 这 些 Weblog 或 博客 的 人 就 叫做 Blogger 或 Blog writer。 博 客 可 以 说 代 
表 的 是 一 种 生活 方式 .工作 方式 .学 习 方式 和 交流 方式 ,被 誉 为 “互联 网 的 第 四 块 里 程 碑 ”。 

3. 网 摘 

网 摘 又 名 网 页 书签 ,英文 原名 是 Social Bookmark ,直译 就 是 “社会 书签 ”。 世 界 上 第 一 
个 网 摘 站 点 del. icio. us 的 创始 人 Joshua 在 2004 年 发 明了 网 摘 。 网 摘 是 一 种 服务 , 它 提供 
的 是 一 种 收藏 分类、 排序 .分 享 互联 网 信息 资源 的 方式 。 网 摘 站 点 存储 网 址 和 相关 信息 列 
表 , 并 使 用 标签 (tag) 对 网 址 进行 索引 ,从 而 使 网 址 资源 有 序 分 类 和 索引 ,使 网 址 及 相关 信息 
的 社会 性 分 享 成 为 可 能 。 在 分 享 人 参与 过 程 中 ,网 址 的 价值 被 给 予 评估 ,群体 的 参与 使 人 们 
挖掘 有 效 信息 的 成 本 得 到 控制 ,知识 分 类 机 制 使 具有 相同 兴趣 的 用 户 更 容易 彼此 分 享 信息 
和 进行 交流 ,故而 网 摘 站 点 呈现 出 一 种 以 知识 分 类 的 社 群 景象 。 

通俗 地 说 ,网 摘 就 是 一 个 放 在 网 络 上 的 海量 收藏 来。 网 摘 将 网 络 上 零散 的 信息 资源 有 
目的 地 进行 汇聚 整理 后 再 展现 出 来 。 网 摘 可 以 提供 很 多 本 地 收藏 夹 所 不 具有 的 功能 , 它 的 
核心 价值 已 经 从 保存 浏览 的 网 页 ,发 展 成 为 新 的 信息 共享 中 心 ,能 够 真正 做 到 “共享 中 收藏 ， 
收藏 中 分 享 ”。 如 果 每 日 使 用 网 摘 的 用 户 数量 较 大 ,用 户 每 日 提供 的 链接 收藏 数量 足够 ,网 
摘 站 就 成 了 汇集 各 种 新 闻 链 接 的 门户 网 站 。 

4. Wiki 

Wiki 一 词 来 源 于 夏威夷 语 “wee kee wee kee”, 原 本 是 “ 快 点 快 点 ”的 意思 ,中 文 译 为 “ 维 
客 ? 或 “维基 ”。 它 是 一 种 多 人 协作 的 写作 工具 。Wiki 站 点 可 以 由 多 人 ,甚至 任何 访问 者 维 
护 , 每 个 人 都 可 以 发 表 自己 的 意见 ,或 者 对 共同 的 主题 进行 扩展 或 者 探讨 。 

Wiki 系统 指 一 种 超 文 本 系统 。 这 种 超 文本 系统 支持 面向 社 群 的 协作 式 写 作 , 同 时 也 包 
括 一 组 支持 这 种 写作 的 辅助 工具 。 有 人 认为 ,wiki 系统 属于 一 种 人 类 知识 网 格 系统 , 它 允 
许 对 Web 编程 一 无 所 知 的 人 们 随意 对 wiki 文本 进行 浏览 ,创建 和 更 改 ,为 了 防止 wiki 中 重 
要 信息 被 修改 或 删除 ,系统 管理 员 可 以 对 某 些 特定 的 页 面 进行 “保护 ”, 使 其 不 可 修改 ; 同时 
wiki 系统 还 支持 面向 社 群 的 协作 式 写作 ,为 协作 式 写 作 提供 必要 帮助 ; 最 后 wiki 的 写作 者 
自然 地 构成 了 一 个 社 群 ,wiki 系统 为 这 个 社 群 提供 简单 的 交流 工具 。 与 其 他 超 文本 系统 相 比 ， 
Wiki 有 使 用 方便 及 开放 的 特点 ,Wiki 系统 可 以 帮助 我 们 在 一 个 社 群 内 共享 某 领域 的 知识 。 

5. RSS 

RSSCReally Simple Syndication ,真正 简单 的 整合 ,也 叫 聚 合 内 容 ) 是 站 点 用 来 和 其 他 站 
点 共享 内 容 的 一 种 简易 方式 和 技术 。 最 初 源 自 浏览 器 “新 闻 频 道 ” 的 技术 ,现在 通常 被 用 于 
新 闻 和 其 他 按 顺 序 排列 的 网 站 ,例如 Blog。RSS 搭建 了 一 个 信息 迅速 传播 的 技术 平台 ,使 
得 每 个 人 都 成 为 潜在 的 信息 提供 者 。 发 布 一 个 RSS 文件 后 ,这 个 RSS Feed 中 包含 的 信息 
就 能 直接 被 其 他 站 点 调用 ,而 且 由 于 这 些 数 据 都 是 标准 的 XML 格式 ,所 以 也 能 在 其 他 的 终 
端 和 服务 中 使 用 。 

如 果 从 RSS 阅读 者 的 角度 来 看 ,完全 不 必 考 虑 它 到 底 是 什么 意思 ,只 要 简单 地 理解 为 
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一 种 方便 的 信息 获取 工具 就 可 以 了 。RSS 获取 信息 的 模式 与 加 入 邮件 列表 (如 电子 杂志 和 
新 闻 邮 件 ) 获 取信 息 有 一 定 的 相似 之 处 ,也 就 是 可 以 不 必 登 录 各 个 提供 信息 的 网 站 而 通过 客 
户 端 浏览 方式 ( 称 为 “RSS 阅读 器 ”) 或 者 在 线 RSS 阅读 方式 阅读 这 些 内 容 。 例 如 ,通过 一 个 
RSS 阅读 器 ,可 以 同时 浏览 新 浪 新 闻 ,也 可 以 浏览 搜狐 或 者 百度 的 新 闻 ( 如 果 你 采用 了 RSS 
订阅 的 话 ) 。 

在 许多 新 闻 信 息 服 务 类 网 站 ,会 看 到 这 样 的 按钮 ESSIHECI 避 .有 的 网 站 使 用 一 个 图 标 ， 
有 的 同时 使 用 两 个 ,这 就 是 典型 的 提供 RSS 订阅 的 标志 ,这 个 图 标 一 般 链 接 到 订阅 RSS 信息 
源 的 URL。 当 然 , 即 使 不 用 这 样 的 图 标 也 是 可 以 的 ,只 要 提供 订阅 RSS 信息 源 的 URL 即 可 。 

使 用 RSS 获取 信息 的 前 提 是 , 先 安装 一 个 RSS 阅读 器 ,然后 将 提供 RSS 服务 的 网 站 加 
入 到 RSS 阅读 器 的 频道 即 可 。 大 部 分 RSS 阅读 器 本 身 也 预 设 了 部 分 RSS 频道 ,如 新 浪 新 
闻 、 百 度 新 闻 等 。 

综述 而 言 , Web 2. 0 模式 下 的 互联 网 应 用 具有 以 下 主要 特点 : 

(1) 用 户 参 与 网 站 内 容 制 造 。 与 Web 1.0 网 站 单项 信息 发 布 的 模式 不 同 , Web 2.0 网 
站 的 内 容 通常 是 用 户 发 布 的 ,使 得 用 户 既 是 网 站 内 容 的 浏览 者 也 是 网 站 内 容 的 制造 者 ,这 也 
就 意味 着 Web 2. 0 网 站 为 用 户 提供 了 更 多 参与 的 机 会 ,例如 博客 网 站 和 wiki 就 是 典型 的 用 
户 创 造 内 容 的 指导 思想 ,而 tag 技术 (用 户 设置 标签 ) 将 传统 网 站 中 的 信息 分 类 工作 直接 交 
给 用 户 来 完成 。 

(2) Web 2.0 更 加 注重 交互 性 。 用 户 不 仅 可 在 发 布 内 容 过 程 中 实现 与 网 络 服务 器 的 交 
互 ,也 可 实现 与 同一 网 站 不 同 用 户 的 交互 ,甚至 可 实现 不 同 网 站 之 间 信 息 的 交互 。 

(3) 符合 Web 标准 的 网 站 设计 。Web 标准 是 目前 国际 上 正在 推广 的 网 站 标准 ,通常 所 
说 的 Web 标准 一 般 是 指 网 站 建设 采用 基于 XHTML 的 网 站 设计 语言 ,实际 上 ,Web 标准 并 
不 是 某 一 标准 ,而 是 一 系列 标准 的 集合 。Web 标准 中 典型 的 应 用 模式 是 "CSS 十 XHTML”， 
它 按 弃 了 HTML 4. 0 中 的 表格 方位 方式 ,其 优点 之 一 是 网 站 设计 代码 规范 ,并 且 减 少 了 大 
量 代码 ,减少 网 络 带 宽 资源 浪费 ,加 快 了 网 站 访问 速度 。 更 重要 的 一 点 是 ,符合 Web 标准 的 
网 站 对 用 户 和 搜索 引擎 更 加 友好 。 

(4) Web 2.0 网 站 与 Web 1.0 没有 绝对 的 界限 。Web 2. 0 技术 可 以 成 为 Web 1.0 网 
站 的 工具 ,一 些 在 Web 2. 0 概念 之 前 诞生 的 网 站 本 身 也 具有 Web 2. 0 特性 ,例如 B2B 电子 
商务 网 站 的 免费 信息 发 布 和 网 络 社区 类 网 站 的 内 容 也 来 源 于 用 户 。 

(5) Web 2.0 的 核心 不 是 技术 而 在 于 思想 。Web 2. 0 有 一 些 典型 的 技术 ,但 技术 是 为 
了 达到 某 种 目的 所 采取 的 手段 。 与 其 说 Web 2. 0 是 互联 网 技术 的 创新 ,不 如 说 是 互联 网 应 
用 指导 思想 的 革命 。 


1.3.3 Web 3.0 时 代 


Web 3.0 是 2006 年 提出 的 热门 概念 ,不 过 目前 对 什么 是 Web 3. 0 并 没有 很 严格 的 定 
义 。 最 常见 的 解释 是 ,网 站 内 的 信息 可 以 直接 和 其 他 网 站 相关 信息 进行 交互 ,能 通过 第 三 方 
信息 平台 同时 对 多 家 网 站 的 信息 进行 整合 使 用 ; 用 户 在 互联 网 上 拥有 自己 的 数据 ,并 能 在 
不 同 网 站 上 使 用 ; 完全 基于 Web, 用 浏览 器 即 可 实现 复杂 系统 程序 才能 实现 的 系统 功能 。 
用 户 数据 经 审计 后 ,同步 于 网 络 数据 。 

Web 3.0 是 在 Web 2.0 的 基础 上 发 展 起 来 的 能 够 更 好 地 体现 网 民 的 劳动 价值 ,并 且 能 
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够 实现 价值 均衡 分 配 的 一 种 互联 网 方式 。 同 Web 2.0 一 样 ,Web 3. 0 更 多 的 不 是 一 种 技术 
上 的 革新 ,而 是 以 统一 的 通信 协议 ,通过 更 加 简洁 的 方式 为 用 户 提供 更 为 个 性 化 的 互联 网 信 
息 咨询 定制 的 一 种 技术 整合 ,进而 指导 技术 的 发 展 和 应 用 。 这 将 会 是 互联 网 发 展 中 由 技术 
创新 走向 用 户 理念 创新 的 关键 一 步 。 

事实 上 ,今天 的 人 们 根本 不 知道 将 来 技术 最 终 会 发 展 成 什么 样 。 以 Web 3. 0 为 例 , 大 
多 数 互 联网 专家 对 于 它 的 特点 比较 一 致 的 看 法 是 , Web 3. 0 会 为 用 户 带 来 更 丰富 、 相 关 度 更 
高 的 体验 。 许 多 专家 还 认为 ,借助 Web 3.0, 每 个 用 户 会 有 一 个 独 有 的 互联 网 配置 文件 ,该 
配置 文件 基于 该 用 户 的 浏览 历史 记录 。Web 3. 0 会 使 用 该 配置 文件 为 每 个 用 户 提供 独特 的 
浏览 体验 。 这 意味 着 ,如 果 两 个 不 同 的 人 使 用 相同 的 服务 ,用 相同 的 关键 字 在 网 上 搜索 ,他 
们 会 得 到 由 各 自 配置 文件 决定 的 不 同 结果 。 

这 种 应 用 所 需 的 技术 和 软件 还 没有 成 熟 。 美 国 的 TiVO 和 Pandora 等 服务 提供 了 基于 
用 户 输入 的 个 性 化 内 容 , 但 它们 都 依赖 一 种 反复 试验 的 方法 ,这 种 方法 不 如 专家 们 所 说 的 
Web 3.0 高 效 。 更 重要 的 是 ,TiVO 和 Pandora 的 服务 范围 都 很 有 限 ,分 别 是 : 电视 节目 和 
音乐 ,而 Web 3.0 将 动用 互联 网 上 的 所 有 信息 。 

一 些 专 家 认为 ,Web 3.0 的 基础 将 是 应 用 编程 接口 API。API 是 一 种 接口 ,是 一 组 让 开 
发 人 员 可 以 开发 能 充分 利用 某 一 组 资源 的 应 用 程序 。 许 多 Web 2.0 网 站 含有 的 API 让 编 
程 人 员 可 以 访问 网 站 的 独特 数据 和 独特 功能 。 比 如 ,Facebook 的 API 让 开发 人 员 开 发 出 以 
Facebook 为 平台 的 程序 ,提供 游戏 .智力 竞赛 .产品 评价 及 更 多 内 容 。 

有 望 帮助 Web 3.0 进入 实际 应 用 的 一 个 技术 (实际 上 在 Web2. 0 时 代 已 经 出 现 ) 是 聚 
合 (Mashup)。 聚 合 是 指 把 两 个 或 多 个 应 用 合并 成 一 个 应 用 。 比 如 ,开发 人 员 可 以 把 允许 用 
户 评 价 餐 馆 的 程序 与 谷歌 地 图 (GoogleMaps) 组 合 起 来 。 这 个 新 的 聚合 应 用 不 但 可 以 显示 
餐馆 信息 评价 ,还 能 在 地 图 上 把 餐馆 标 出 来 ,那样 用 户 就 能 查看 餐馆 位 置 。 一 些 互 联网 专家 
认为 ,开发 聚合 应 用 在 Web 3. 0 时 代 会 轻而易举 , 谁 都 能 开发 。 

也 有 一 些 专 家 认为 ,Web 3. 0 会 以 绒 新 的 面貌 出 现 。 它 甚至 可 能 不 会 使 用 HTML 作 
为 基本 的 编码 语言 ,而 是 会 依赖 某 种 不 知 其 名 的 新 语言 。 这 些 专 家 表示 ,从头 开 始 可 能 比试 
图 改变 当今 的 互联 网 更 容易 。 不 过 ,全 新 版 本 的 Web 3.0 纯 属 理论 阶段 ,实际 上 目前 还 无 
法 知道 它 会 怎样 工作 。 在 有 “互联 网 之 父 ” 之 称 的 TimBerners-Lee 看 来 ,互联 网 的 未 来 是 语 
义 网 (Semantic Web) ,而 许多 互联 网 专家 在 谈论 Web 3. 0 时 也 大 量 借鉴 了 他 的 理论 。 


思考 练习 题 


. 什么 是 万 维 网 ? 

. 什么 是 B/S 结构 ? 它 和 C/S 结构 相 比 ,有 什么 优点 ? 

. 试 比 较 ASP .PHP、JSP、ASP. NET 各 自 的 特点 。 

. 简 述 Web 访问 的 机 理 。 

. 浏览 器 的 作用 是 什么 ? 

. 请 说 明 Ajax 技术 的 工作 原理 。 

. DHTML 技术 的 特点 及 功能 是 什么 ? 

. Web 发 展 历 程 每 个 时 期 的 特点 是 什么 ?分别 包含 哪些 内 容 ? 
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学 习 要 点 

(1) 掌握 IIS Web 服务 器 的 配置 。 

(2) 了 解 Microsoft .NET Framework 及 Visual Studio 2010 开发 工具 。 
(3) 熟悉 Visual Studio 2010 开发 环境 。 

(4) 学 会 在 VS 2010 环境 下 配置 源 代 码 控制 软件 Visual Source Safe。 
(5) 熟悉 和 掌握 Visual Source Safe 的 常用 功能 。 

(6) 掌握 发 布 网 站 的 3 种 主要 方法 。 


Web 服务 器 是 指 驻 留 于 因特网 上 某 种 类 型 的 计算 机 程序 。 当 Web 浏览 
器 (客户 端 ) 连 到 服务 器 上 并 请 求 页 面 文件 时 ,服务 器 将 处 理 该 请 求 并 将 页 面 
文件 发 送 回 浏览 器 上 ,附带 的 信息 会 告诉 浏览 器 如 何 查看 该 文件 ( 即 文件 类 
型 )。 服 务 器 使 用 HTTP(HyperText Transfer Protocol, 超 文本 传送 协议 ) 进 
行 信息 交流 ,这 就 是 人 们 常 把 它们 称 为 HTTP 服务 器 的 原因 。 

目前 常用 的 Web 服务 器 包括 IIS(Internet Information Server, 因 特 网 信 
息 服 务 )、Apache、Tomcat、Sambar、Jboss、WebLogic、WebSphere 以 及 金蝶 
Apusic, 等 等 。 它 们 运行 在 不 同 的 操作 系统 平台 上 。 常 用 的 Web 服务 器 如 
IIS、Tomcat、Apache 和 Jboss 等 ,通常 以 免费 方式 供用 户 使 用 ,支持 的 并 发 用 
户 数 有 限 , 适 合作 中 小 型 网 站 系统 的 Web 服务 器 ,而 WebLogic、WebSphere 
和 金蝶 Apusic 等 专业 Web 服务 器 ,在 并 发 用 户 大 量 增加 的 情况 下 , 仍 可 保持 
较 高 的 处 理性 能 ,适合 作 大 型 网 站 系统 的 Web 服务 器 。 要 进行 Web 应 用 系 
统 的 开发 .部 署 和 维护 ,有 必要 对 Web 服务 器 的 配置 进行 深刻 了 解 。 不 同 的 
Web 服务 器 具有 不 同 的 配置 方法 ,本章 将 详细 介绍 IIS 的 配置 过 程 ,这 对 运 
行 和 维护 网 站 是 很 重要 的 ,也 是 构建 Web 开发 环境 的 基础 。 此 外 ,本 书 内 容 
针对 Visual Studio 2010 开发 工具 (下 称 VS 2010) 讲 解 Web 应 用 系统 的 开 
发 ,因此 在 2. 2 节 介绍 了 VS 2010 开发 工具 的 使 用 。 大 型 Web 应 用 系统 的 
开发 一 般 会 涉及 多 人 共同 开发 .因此 如 何 构建 多 人 开发 的 环境 ,利用 源 代码 
版 本 控制 软件 是 必需 的 ,2. 3 节 将 详细 介绍 在 VS 2010 环境 中 如 何 配置 源 代 
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码 版 本 控制 环境 。 网 站 系统 开发 建 好 后 ,需要 发 布 到 Internet 上 ,2.4 节 详 细 介绍 了 Web 
应 用 系统 的 发 布 过 程 。 


2.1 如何 配 置 IIS Web 服务 器 


IIS 是 微软 公司 在 Internet 上 发 布 信息 的 Web 服务 器 。IIS 是 构建 和 部 署 电子 商务 解 
决 方案 以 及 关键 应 用 程序 的 一 种 安全 平台 , 它 通 过 使 用 超 文本 传送 协议 HTTP 传输 信息 。 

Web 服务 器 IIS 可 运行 在 Windows XP Professional、Windows 2008 Server 和 
Windows 7 等 操作 系统 上 。1IS 5.1\IIS 6.0 和 IIS 7. 5 可 分 别 通 过 安装 Windows XP 
Professional、Windows Server 2008 和 Windows 7 得 到 。Windows XP Professional 中 的 
JIS 只 有 一 个 默认 网 站 ,不 能 创建 多 个 网 站 ,而 Windows Server 版 和 Windows 7 旗舰 版 可 
创建 多 个 Web 站 点 , 即 在 一 台 计 算 机 上 可 以 配置 多 个 网 站 。 不 同 的 IIS 版 本 在 安全 性 和 服 
务 性 能 等 方面 有 所 加 强 , 但 网 站 配置 操作 区 别 不 大 ,本 书 主要 以 IIS 7. 0 为 例 进 行 说 明 。 


2.1.1 Web 站 点 的 配置 


(1) 依次 按照 < 开始 ”| 程序 "| 管理 工具 ”|*Internet 信息 服务 ”的 顺序 启动 IIS, 如 果 读 
者 的 IIS 没有 添加 到 “开始 ”菜单 中 , 则 进入 “控制 面板 ”1“ 系 统 和 安全 ”|“ 管 理工 具 ”| “Internet 
信息 服务 (11S) 管 理 器 ”, 启 动 IIS, 弹 出 “Internet 信息 服务 管理 器 ”窗口 ,如 图 2-1 所 示 。 


[CE | » aucwanpc » Rss » Dionai ， 
下 


意 Dianqi 主页 
ba " 租 天 (6) 吴宇 也 野趣 (A) | 分 相依 天 区域 MM 
ASPNET 
rr 局 忆 be 
风 局 9 岛 岛 双 & EE 
-NET 妨 深 .NET 错误 页 .NET 配置 文 .NET 全 球 化 .NET 播 公 规 .NET 信任 最 SMTP 电子 。 会 活 杖 术 查看 应 用 国友 
件 则 到 部件 查看 肆 视 目录 


生动 
》 局 


[3 


浏览 网 站 
轩 PR “8080 (htp) 
总 过 
Re 
限制 - 
© 


图 2-1 IIS 启 动 界面 


如 果 找 不 到 “Internet 服务 管理 器 ” ,说明 你 的 操作 系统 还 没有 安装 IIS, 你 可 以 选择 “ 控 
制 面板 ”| “程序 和 功能 ”1“ 打 开 或 关闭 Windows 功能 ”命令 后 ,选中 “Internet 信息 服务 
(1IS)” 并 进行 安装 定制 后 ,Windows 将 自动 完成 安装 过 程 。 

(2) 用 鼠标 右键 单 击 左 侧 的 “网 站 ”, 选 择 * 添 加 网 站 ”, 将 出 现 添加 网 站 的 对 话 框 , 可 以 
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给 网 站 取 一 个 名 称 ,不 妨 为 Dianqi, 输 入 网 站 所 在 的 文件 夹 , 再 输入 网 站 的 IP 地 址 和 主机 名 
等 ,一 个 新 网 站 Dianqi 就 创建 和 启动 起 来 了 。 若 要 更 改 Dianqi 网 站 所 在 的 文件 夹 , 单 击 左 
侧 * 网 站 ”下 的 “Dianqi" 后 ,在 右 侧 边栏 中 选择 “高 级 设置 ?项 ,弹出 Dianqi 网 站 的 “高 级 设置 
对 话 框 ,如 图 2-2 所 示 ,直接 修改 物理 路 径 即 可 。 


http:":80: 
Defauk Web Site 
%SystemDrive%Ninetpub\wwwroa 
ClearText 
True 


120 
4294967295 


4294967295 


2-2 “高 级 设置 "对 话 框 


(3) 单 击 左 侧 “Dianqi" 选 项 ,在 右边 栏 中 选择 编辑 网 站 ?选项 卡 下 的 “* 绑 定 …" 选 项 , 弹 
出 如 图 2-3 所 示 的 对 话 框 , 单 击 列表 框 中 的 “http” 后 , 单 击 右 侧 “编辑 ”按钮 , 则 出 现 如 图 2-4 
所 示 对 话 框 。 在 “IP 地 址 ” 框 中 输入 本 服务 器 的 真实 IP 地 址 。IP 地 址 是 网 络 上 计算 机 通信 
的 基础 ,网 络 上 的 计算 机 通过 IP 地 址 来 寻找 另 一 台 计 算 机 。 若 对 本 Web 服务 器 的 配置 是 
作为 测试 用 的 ,通常 情况 下 可 使 用 默认 的 设置 “全 部 未 分 配 ?或 输入 "127. 0. 0. 1”, 它 映射 本 
机 的 域名 localhost( 在 C:N\windowsNsystem32N\driversN\etc\hosts 中 设 定 ) ,也 就 是 说 用 户 在 
IE 浏览 器 上 输入 http:// 127.0.0.1 和 http://localhost 的 效果 是 相同 的 。 


类 型 ”主机 名 苇 口 ”Pp 地 址 九 定 信息 | 添加 (A | 
http 80 * = 
(3 
测 除 (R) 
浏览 (B) 
Co 。 
ua 


2-3 “网 站 绑 定 ? 对 话 框 
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如 果 服 务 器 拥有 多 个 Web 站 点 但 只 有 一 个 IP 地 址 ,就 必须 在 所 有 的 站 点 中 共享 同一 
个 IP 地址 。 通 过 这 个 共享 的 IP 地 址 ,在 访问 两 个 或 两 个 以 上 站 点 时 都 能 够 成 功 地 连接 到 
站 点 所 在 的 服务 器 。 为 了 实现 这 一 功能 ,需要 让 IIS 知道 每 个 站 点 所 使 用 的 域名 。 此 时 ,用 
户 只 需 单 击 “ 网 站 绑 定 ”对 话 框 右 侧 的 “添加 ”按钮 ,出 现 图 2-4 所 示 对 话 框 。 


汪 0 网 站 十 TE (ctu 


类 型 中 了 p 地 址 D: 美 口 (OQ) 
http | 全 部 未 分 配 ~ 80 

1 
主机 名 (H): 


www.CET.com 


示例 : www.contoso.com 或 marketing.contoso.com 


2-4 “添加 网 站 绑 定 ”对 话 框 


输入 IP 地 址 、TCP(Transfer Control Protocol, 传 送 控 制 协 议 ) 端 口号 和 主机 头 名 。 因 
为 只 有 一 个 IP 地 址 ,IP 地 址 保持 不 变 ,TCP 端口 值 都 是 80, 区 别 每 个 网 站 的 唯一 标志 就 只 
有 “主机 头 名 ”( 网 站 的 域名 )。 假 设 用 户 在 多 个 网 站 中 有 一 个 网 站 的 名 称 叫 CET, 已 经 注册 
的 域名 是 “www. cet. com”, 则 应 在 主机 头 名 中 输入 www. cet. com, 如 图 2-4 所 示 。 重 复 上 
述 步 又 ,对 每 个 网 站 指定 主机 头 名 ,指定 其 IP 地 址 相同 ,端口 号 都 是 80, 这 台 提 供 Web 服务 
的 计算 机 就 称 为 “虚拟 主机 ?了 。 

上 述 多 个 网 站 共享 同一 个 IP 地 址 和 端口 号 ,通过 主机 头 名 来 区 分 不 同 的 网 站 。 另 外 也 
可 不 通过 主机 头 名 来 区 分 不 同 的 网 站 , 即 IP 地 址 和 主机 头 名 相同 ,但 端口 号 不 同 。 在 图 2-4 
所 示 对 话 框 中 ,在 “TCP 端口 ”文本 框 中 输入 TCP 使 用 的 端口 号 。 端 口 是 进 程 之 间 进 行 通 
信 的 基础 ,IP 地 址 和 TCP 端口 分 别 从 宏观 和 微观 上 决定 了 一 个 应 用 程序 的 执行 。Web 服 
务 器 的 TCP 端口 号 默认 值 是 80 ,也 可 以 设 为 其 他 值 ,假定 为 8080 ,用 户 在 访问 此 网 站 的 时 
候 , 需 要 输入 相应 的 端口 号 ,例如 “http:// www. cet. com:8080”。 

此 外 ,在 图 2-2 选项 卡 中 用 户 还 可 以 进行 网 站 连接 超时 设置 ,连接 时 间 一 旦 超过 设置 的 
值 (以 秒 为 单位 ), 则 就 会 提示 连接 失败 , 打 不 开 Web 网 站 了 。 各 个 操作 系统 的 默认 值 不 一 
样 ,用 户 可 以 根据 需要 修改 此 值 。 其 他 选项 建议 保持 系统 默认 值 。 

单 击 图 2-1 中 的 “日 志 ? 选 项 ,可 以 将 访问 网 站 的 相关 信息 放 到 日 志文 件 , 包 括 访问 用 户 
的 IP 地 址 .什么 时 候 访 问 了 网 站 的 什么 网 页 等 ,以 备 将 来 日 志 分 析 ,例如 可 查询 用 户 的 非法 
访问 信息 。 日 志 的 内 容 一 般 放 在 文本 文件 中 ,也 可 直接 放 到 数据 库 中 (针对 不 同 的 JIS 版 
本 )。 放 在 文本 文件 中 时 ,可 通过 “选择 字段 ”来 确定 日 志文 件 的 存放 内 容 。 

单 击 图 2-1 中 的 “默认 文档 ”选项 ,出 现 如 图 2-5 所 示 的 界面 。 我 们 平常 在 访问 某 网 站 
的 时 候 , 一 般 会 在 浏览 器 中 直接 输入 网 站 的 URL 地 址 ,例如 “http://www. ccw. com. cn”， 
实际 上 本 来 应 该 输入 “http://www. ccw. com. cn/default. asp”, 那 么 为 什么 可 以 省 略 部 分 
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不 输入 呢 ? 答案 就 在 于 在 IIS 中 启用 了 默认 文档 。 当 用 户 输入 “http://www. ccw. com. cn” 
后 ,IIS 先 查 找 “Default. htm”, 找 不 到 时 再 依次 找 第 二 个 “Default. asp”, 若 找到 , 则 对 之 进行 
处 理发 回 给 浏览 器 。 因 此 如 果 想 让 用 户 更 快 地 访问 你 的 网 站 ,不 需要 让 他 输入 元 长 的 文件 
名 , 则 可 在 “文档 ”中 进行 设置 。 注 意 一 般 不 需要 设置 很 多 默认 文档 ,否则 每 次 访问 都 要 判断 
会 影响 IIS 服务 性 能 。 


全 有 文档 国 文件 starthtm" 在 当前 

y 目录 中 存在 . 建议 多 将 此 文 
使 用 此 功能 措 定 当 宫 产 铂 未 清 求 特定 文件 名 时 返回 的 点 闪 文件 。 按 优先 圾 顺 证 设置 时 认 文 村 i 
名 称 科目 关 型 能 . 
Do 最 | 
Defaultasp 继承 二 
indexhtm 继承 一 一 
indexhtml 级 承 eed 
iisstarthtm 狂 承 | 
defaultaspx 变 承 @ 坝 

联机 超 助 


2-5 “默认 文档 ”选项 卡 


2.1.2 主 目录 和 虚拟 目录 的 建立 


建 好 的 Web 站 点 会 放 在 某 个 文件 夹 下 , 它 由 一 系列 文件 夹 和 文件 组 成 ,一 个 典型 的 
Web 站 点 目录 结构 如 图 2-6 所 示 。 

通常 可 以 将 如 图 2-6 中 的 文件 夹 “D:\CET” 称 为 主 目录 四 ES 
(Home Directory)。 主 目录 下 可 包含 若干 子 目录 ,但 在 Web 服 -en 


由 - 国 App Data 

务 器 管理 中 ,人 允许 主 目录 下 的 子 目录 可 以 不 位 于 主 目录 下 ,可 以 -ee 
在 硬盘 任何 位 置 ,这 样 的 子 目录 ,人 们 称 之 为 虚拟 目录 。 例 如 针 | 清 
对 图 2-6 中 的 主 目录 “D:\CET”, 目 录 “E:\myHTM” 中 存放 着 与 ee 
该 网 站 相关 的 其 他 网 页 , 现 需要 将 "E:\myHTM” 纳 入 主 目录 中 em 
统一 管理 ,那么 就 需要 在 该 主 目录 下 创建 虚拟 目录 。 下 面 分 别 宝 Seeo wo 
介绍 主 目录 和 虚拟 目录 建立 过 程 。 Be 

1. 主 目录 的 建立 和 国 reaen ware 

每 个 Web 站 点 都 必须 有 一 个 主 目录 。 一 个 站 点 所 包含 的 所 Ns 
有 网 页 和 相关 文件 都 放 在 主 目录 下 。 主 目录 的 建立 过 程 实际 上 图 2-6 典型 的 Web 站 点 
就 是 设置 网 站 所 存放 的 物理 路 径 。 单 击 图 2-1 所 示 左 侧 目录 结构 


“Dianqi” 网 站 ,在 右 侧 边栏 中 选择 “基本 设置 "项, 则 出 现 如 图 2-7 所 示 对 话 框 ,输入 物理 路 径 
即 可 。 

可 以 对 主 目录 进行 访问 权限 的 设置 。 在 图 2-1 的 右 侧 边栏 中 选择 “编辑 权限 ”项 , 则 出 
现 如 图 2-8 所 示 对 话 框 ,其 中 “IIS_IUSERS” 为 匿名 访问 网 站 的 用 户 组 ,可 根据 被 管理 网 站 
的 特点 来 选择 权限 配置 。 

(1)“ 读 取 ” 权 限 就 是 允许 用 户 可 以 读 取 网 站 中 的 文件 或 目录 ,这 个 权限 一 般 都 是 开放 
的 ,不 然 用 户 将 无 法 浏览 网 页 。 
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划 规 共享] 安全 。 | 以 前 的 版 本 [ 自 定义 | 


对 象 名 称 : CiVinetpabvwmroot 


网 站 名 称 (S): 应 用 程序 地 (: 
Eed | abe 
物理 路 径 (P): 
DA~EzDv5.TImp 四 
传递 身份 验证 
LsA 
这 为 (0 | | NR(G).- 大 汪 ttRR9RR 让 击 “高 。 [十 二 50 


了 部 访问 控 知 Ha 权限 


匡 琵 二 于 到] [内 


图 2-7 “ 主 目录 ”设置 对 话 框 图 2-8 网 站 访问 权限 的 设置 


(2)“ 写 入 ”权限 则 是 允许 用 户 将 本 地 文件 上 传 到 服务 器 的 主 目 录 中 ,或 者 可 更 改 / 重 写 
文件 的 内 容 。 考 虑 到 网 站 的 安全 性 因素 ,这 里 注意 不 要 随意 设 定 目 录 的 写 入 权限 ,只 对 需要 
存放 上 载 文件 的 子 目录 或 需要 更 改 / 重 写 内 容 的 文件 进行 设置 。 

(3)“ 列 出 文件 夹 内 容 ? 就 是 让 用 户 通过 浏览 器 浏览 在 某 个 主 目录 或 虚拟 目录 下 的 所 有 
文件 或 文件 夹 , 此 时 用 户 可 以 了 解 整个 网 站 的 目录 结构 。 一 般 情况 下 不 建议 选择 此 项 ,但 有 
时 在 内 部 网 上 ,通过 设 定 目 录 浏 览 ,可 以 实现 文件 共享 ,让 用 户 下 载 文 件 。 

2. 虚拟 目录 的 建立 


我 们 可 以 这 样 来 理解 : 一 个 网 站 系统 由 许 许 多 多 页 面 文 件 和 多 媒体 文件 等 组 成 ,这 些 
文件 我 们 不 一 定 非 要 将 它们 全 部 放 在 一 个 目录 下 ,可 以 将 存放 上 载 图 片 的 目录 放 到 磁盘 剩 
余 空 间 比较 大 的 玉 盘 中 去 ,将 网 站 中 独立 运行 的 子 系统 分 别 放 在 不 同 的 目录 中 。 例 如 图 2-9 
中 ,出 于 某 种 需要 , CET 网 站 的 内 容 分 别 放 在 D: \CET 和 E:\img、 E:\Manager、 
E:\Student 中 , 此 时 该 如 何 配置 网 站 ? 可 以 将 D: \ CET 设 成 主 目 录 , 将 E: \img、 
E:\Manager、E:\Student 分 别 设 成 虚拟 目录 ,图 2-10 为 IIS 中 实际 查看 效果 ,此 时 E:\img、 
E:\Manager、E:\Student 在 IIS 的 管理 下 看 起 来 就 如 同 D:\CET 下 的 子 目录 ,只 是 图 标 不 


日 - F mon 
四- [spp_Code 
和 由 - 国 App_Data 
各 9 EE Eg:.、 | 外 - 了 photo 
由- 0App_Code ®- ine 外 - 国 Reports 
由 app_Data 由 - 国 Nanager 国 oe 
和 由- ohoto 白 - 留 student 直 - 各 Janager 
由 - 国 Reports 由 - CG cetFour 申 Student 
申 - 国 hdnin, aspx 四- 国 cetsix 旬 - 国 4 
由 - 图 Default.aspx 。 由 . 入 StudentInfo 外 - 国 Default. aspx 
由 -he 由 - 加 reermfo 加 | Pe 
和 外 reeNenu. aspx 司 s ee 外 TreeNenu. aspx 
wwd. vebinfo 外 图 System a | vwd. webinfo 
— 六 Web. config Web. config 


图 2-9 CET 网 站 实际 存放 目录 结构 图 2-10 CET 网 站 IIS 目 录 结 构 
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从 上 可 以 看 出 ,虚拟 目录 在 物理 上 可 以 不 属于 主 目录 ,也 即 它 是 主 目录 以 外 的 其 他 目 
录 , 但 需要 纳入 到 主 目录 下 来 进行 Web 页 面 发 布 。 要 从 主 目录 以 外 的 其 他 目录 中 发 布 网 
站 ,就 必须 创建 虚拟 目录 。 虚 拟 目录 可 以 不 包含 在 主 目录 中 , 它 有 一 个 别名 供 Web 浏览 器 
访问 。 虚 拟 目 录 的 别名 可 以 随意 取 定 ,一般 就 可 按 实 际 文件 夹 名 取 定 。 图 2-10 中 虚拟 目录 
的 别名 采用 了 和 实际 文件 夹 名 相同 的 名 称 。 使 用 别名 有 以 下 好 处 : 

。 别名 可 比 实际 文件 夹 路 径 名 短 ,便于 用 户 输入 。 

。 使 用 别名 较 安 全 ,因为 虚拟 目录 的 别名 和 实际 路 径 之 间 是 影射 关系 ,用 户 很 难 知道 

文件 所 存放 的 实际 位 置 。 
”虚拟 目录 所 对 应 的 实际 路 径 可 以 随意 搬 动 ,但 用 户 访问 虚拟 目录 的 URL 不 变 。 


建立 虚拟 目录 的 步骤 如 下 : 
(1) 在 “Internet 信息 服务 "窗口 中 右 击 “Default Web Site” 选 项 ,在 弹出 的 快捷 菜单 中 


选择 “添加 虚拟 目录 ”, 弹 出 “添加 虚拟 目录 ”对 话 框 ,如 图 2-11 所 示 。 
La 一 


网 站 名 称 : Default Web Site | 


连接 为 (Q-。 | | 测试 设置 (G) | 
"= | te 


图 2-11 “虚拟 目录 创建 向 导 ” 对 话 框 


(2) 在 “虚拟 目录 别名 ”对 话 框 处 输入 相应 的 别名 ,如 图 2-12 所 示 。 别 名 不 要 随意 取 
定 , 因 为 访问 虚拟 目录 中 的 网 页 时 要 通过 别名 来 访问 。 


村 


2-12 “虚拟 目录 别名 ”对 话 框 


38 
开发 技术 (第 2 版 ) 


(3) 在 网 站 “物理 路 径 ” 对 话 框 中 输入 网 站 内 容 所 在 的 目 
录 路 径 ,或 单 击 “…” 按 钮 来 选择 。 设 置 完毕 后 , 单 击 * 确 定 ” 按 DO 
钮 ,虚拟 目录 被 添加 进 连 接 中 ,如 图 2-13 所 示 。 文件 (视图 V) 二 (H) 
虚拟 目录 除了 可 以 实现 将 某 个 内 容 分 散在 各 个 子 目 录 下 
的 网 站 通过 IIS 集中 管理 外 ,虚拟 目录 的 另外 一 种 用 法 就 是 。 [pezonosozmics Pezor 


将 构建 的 多 个 独立 网 站 系统 放 到 一 个 主 站 点 ( 主 目录 ) 下 运 | ee 
行 。 例 如 当前 主 站 点 是 http:// 219. 153. 14. 22/ ,现在 有 两 全 
? | 


个 独立 网 站 系统 ,分 别 在 主 站 点 下 建立 虚拟 目录 ,别名 分 别 是 
WebA、WebB, 则 访问 两 个 独立 网 站 可 通过 http://219. 153. 
14. 22/WebA http:// 219. 153. 14. 22/ WebB 进行 。 


2.1.3 Web 服务 性 能 参数 设置 


网 站 应 尽 可 能 快 地 处 理 用 户 的 页 面 访问 请 求 , 在 大 量 并 发 用 户 访问 时 仍 能 提供 优质 服 
务 。 但 受 计算 机 硬件 资源 限制 ,实际 上 这 是 矛盾 的 ,所 以 应 根据 情况 限制 Web 站 点 的 并 发 
连接 数量 和 对 网 络 带宽 的 使 用 进行 限制 ,否则 会 出 现 * 和 欲 速 则 不 达 ” 的 情况 。 

用 户 可 在 图 2-2 中 设置 “最 大 并 发 连接 数 ” 以 限制 Web 站 点 的 连接 数量 。 通 过 这 种 方法 ， 
可 以 控制 并 发 访问 该 站 点 的 用 户 数 。 服 务 器 的 资源 是 有 限 的 。 如 果 用 户 的 服务 器 上 存放 多 个 
网 站 ,每 个 网 站 都 占用 服务 器 的 最 大 资源 (如 带宽 ) ,这 样 就 很 有 可 能 导致 整个 服务 器 的 瘫痪 。 
因此 可 根据 情况 限制 网 站 所 使 用 的 网 络 带宽 。 用 户 可 在 图 2-2 中 设置 该 网 站 的 最 大 带宽 。 

另外 一 种 提高 Web 服务 性 能 的 方法 就 是 使 用 HTTP 压缩 优化 功能 。 通 过 HTTP 压 
缩 技术 可 以 将 Web 服务 器 中 的 网 页 文件 进行 动态 压缩 ,这样 减少 了 在 服务 器 和 客户 端 之 间 
传输 的 数据 量 , 显 著 地 提高 网 站 的 性 能 。 这 种 压缩 ,是 在 不 影响 网 站 实际 工作 流程 和 服务 内 
容 等 情况 下 实现 的 。HTTP 压缩 是 服务 器 的 功能 ,而 浏览 器 也 会 自动 地 支持 而 无 须 对 客户 
端 进行 另外 的 配置 。 要 想 启 用 服务 器 HTTP 压缩 ,在 图 2-1 中 单 击 中 间 栏 的 “压缩 ”选项 即 
可 。 如 果 要 压缩 如 HTML、CSS、XML 等 静态 文件 ,就 选中 “启用 静态 内 容 压 缩 * 如 果 要 压 
缩 ASP. NET 页 面 的 输出 , 则 就 选中 * 启 用 动态 内 容 压缩 "。 由 于 ASP. NET 页 面 是 动态 生 
成 的 ,因此 每 次 请 求 它们 时 都 会 被 压缩 。 一 旦 对 静态 文件 进行 了 压缩 , 放 到 临时 文件 夹 后 ， 
对 所 有 后 续 的 请 求 页 面 都 会 发 送 该 静态 文件 的 压缩 版 本 。 采 用 压缩 虽然 增 大 了 服务 器 
CPU 的 开销 ,但 将 会 大 大 改善 访问 速度 受 限于 网 络 带宽 的 情况 。 这 种 技术 不 是 所 有 浏览 器 
都 支持 ,但 对 IE、Firefox 浏览 器 有 效 。 


图 2-13 虚拟 目录 创建 后 效果 


2.2 Microsoft Visual Studio 2010 开发 工具 的 使 用 


2.2.1 .NET Framework 概述 及 VS 2010 开发 工具 介绍 
1. .NET Framework 概述 
微软 Visual Studio( 以 下 简称 为 VS) 开 发 工具 版 本 不 断 更 新 ,从 VS 2002、VS 2003、 


VS 2005、VS 2008 到 VS 2010, 作 为 VS 开发 工具 的 支撑 平台 . NET, 其 版 本 也 相应 地 从 
.NET Framework 2.0、Framework 3.0/3.5 更 新 到 Framework 4. 0。 
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微软 . NET Framework 是 一 个 用 于 构建 ,部 署 和 运行 Web 服务 及 应 用 程序 的 平台 。 
.NET Framework 旨 在 实现 下 列 目标 : 

。 提供 一 个 一 致 的 面向 对 象 的 编程 环境 ,而 无 论 对 象 代码 是 在 本 地 存储 和 执行 ,还 是 
分 布 在 Internet 上 在 本 地 执行 ,或 者 是 在 远程 执行 。 
提供 一 个 将 软件 部 署 和 版 本 控制 冲突 最 小 化 的 代码 执行 环境 。 
提供 一 个 可 提高 代码 (包括 由 未 知 的 或 不 完全 受信 任 的 第 三 方 创 建 的 代码 ) 执 行 安 
全 性 的 代码 执行 环境 。 
提供 一 个 可 消除 脚本 环境 或 解释 环境 的 性 能 问题 的 代码 执行 环境 。 

使 开发 人 员 的 经 验 在 面 对 类 型 大 不 相同 的 应 用 程序 (如 基于 Windows 的 应 用 程序 
和 基于 Web 的 应 用 程序 ) 时 保持 一 致 。 

按照 工业 标准 生成 所 有 通信 ,以 确保 基于 . NET Framework 的 代码 可 与 任何 其 他 代 
码 集成 。 

.NET Framework 有 3 个 组 成 部 分 : 公共 语言 运行 库 (Common Language Runtime， 
CLR)、. NET Framework 类 库 和 ASP.NET。 

1) CLR 

公共 语言 运行 库 的 功能 是 负责 管理 内 存 线程 执行 .代码 执行 .代码 安全 验证 、 编 译 和 其 
他 系统 服务 。 代 码 管理 是 运行 库 的 基本 功能 。 需 要 以 CLR 环境 来 支撑 运行 的 程序 代码 称 
为 “托管 代码 ”, 反 之 无 须 CLR 环境 支撑 运行 的 程序 代码 称 为 * 非 托管 代码 ,例如 用 Visual 
Basic、Visual C++ 等 工具 开发 的 程序 在 运行 时 无 须 CLR 支撑 ,其 程序 代码 就 是 “ 非 托管 代码 ”。 

托管 代码 是 可 以 使 用 C#、J#、VB. NET 及 C++ 等 20 多 种 支持 . NET Framework 的 
高 级 语言 编写 的 代码 。 所 有 的 语言 共享 统一 的 类 库 集合 ,并 能 被 编码 成 中 间 语 言 MSIL 
(Microsoft Intermediate Language)。 托 管 代 码 在 部 署 后 运行 时 ,运行 库 编译 器 在 托管 执行 
环境 下 编译 中 间 诸 言 (IL) 使 之 成 为 本 地 可 执行 的 代码 ,并 使 用 数组 边界 、 索 引 检 查 、 异 常 处 
理 和 垃圾 回收 等 手段 确保 类 型 的 安全 。 这 种 编译 过 程 被 称 之 为 JIT 实时 编译 (Just-In-Time 
编译 )。CLR 为 所 支持 的 每 种 CPU 结构 都 提供 了 JIT 编译 器 。IL 在 某 种 程度 上 借鉴 了 
Java 程序 先 编译 成 ByteCode( 字 节 码 ) 运行 时 再 转换 成 本 地 机 器 码 的 这 种 做 法 。 

在 托管 执行 环境 中 使 用 托管 代码 并 编译 ,可 以 避免 许多 典型 的 导致 安全 黑洞 和 不 稳定 
程序 的 编程 错误 。 此 外 ,许多 不 可 靠 的 设计 也 自动 地 被 增强 了 安全 性 ,例如 类 型 安全 检查 、 
内 存 管理 和 释放 无 效 对 象 。 程 序 员 可 以 花 更 多 的 精力 关注 程序 的 应 用 逻辑 设计 并 可 减少 代 
码 的 编写 量 ,这 就 意味 着 更 短 的 开发 时 间 和 更 健壮 的 程序 。 

2) .NET Framework 类 库 

.NET Framework 类 库 是 一 个 综合 的 、 面 向 对 象 的 ,可 重复 使 用 类 的 集合 , 它 高 度 集成 
了 公共 语言 运行 库 , 提 供 了 在 应 用 程序 中 派生 新 类 的 功能 ,用 户 可 在 新 类 中 附加 新 的 功能 。 
这 使 得 . NET Framework 的 类 库 使 用 方便 ,并 节省 了 学 习 . NET Framework 新 功能 的 时 
间 。 另 外 ,第 三 方 的 组 件 可 以 与 .NET Framework 的 类 紧密 地 集成 。 NET Framework 类 
库 能 够 完成 很 多 的 通用 程序 任务 ,例如 字符 串 管理 数据 集 、 数 据 库 连接 和 文件 访问 等 。 开 
发 人 员 可 用 . NET Framework 类 库 创建 ASP. NET 应 用 程序 。 

3) ASP. NET 

ASP. NET 为 开发 人 员 能 够 使 用 . NET Framework 开发 基于 Web 的 应 用 程序 提供 了 
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宿主 环境 , 即 在 ASP. NET 中 ,开发 人 员 可 使 用 托管 代码 来 开发 网 站 。 

.NET Framework 的 核心 技术 内 容 庞大 而 复杂 ,作为 一 般 的 Web 开发 人 员 ,并 不 需要 
对 它 进 行 深 入 了 解 后 才 可 以 进行 应 用 开发 ,但 了 解 并 熟悉 其 核心 技术 无 疑 将 大 大 有 助 于 
Web 应 用 程序 的 开发 。 

新 版 本 的 Windows 操作 系统 已 经 附带 . NET Framework 软件 运行 平台 ,也 可 从 网 上 下 
载 . NET Framework 4. 0 进行 独立 安装 。 

2. VS 2010 开发 工具 介绍 

Web 应 用 程序 的 优点 在 于 可 以 让 企业 间 的 业务 数据 及 数据 处 理 等 行为 ,通过 因特网 的 
通信 来 彼此 交换 信息 。 这 样 不 但 可 以 节省 数据 交换 的 时 间 ,而 且 可 以 简化 流程 。 但 是 在 新 
一 代 的 .NET 开发 平台 还 没有 出 现 之 前 ,要 让 因特网 应 用 程序 达到 上 述 的 功能 是 一 项 浩大 
的 工程 ,牵涉 到 的 技术 及 程序 开发 语言 可 能 包括 HTML、ASP、VBScript、JavaScript、C++、 
ADO、SQL、COM、MTS 等 。 这 样 的 环境 对 于 开发 人 员 来 说 , 想 要 快速 地 开发 一 个 功能 强大 
且 稳 定 可 靠 的 Web 应 用 程序 ,不 是 一 项 轻松 的 工作 。 之 前 的 Microsoft Visual Studio 6. 0 
及 Windows 上 的 一 些 架构 及 服务 ,已 经 帮助 程序 设计 师 由 单机 平台 的 程序 开发 转 为 C/S 
和 B/S 的 架构 来 开发 应 用 程序 。 

为 了 让 开发 平台 更 容易 开发 以 因特网 为 基础 的 应 用 程序 ,2002 年 微软 推出 了 基于 
.NET Framework 1. 0 的 Visual Studio. NET 2002 开发 工具 ,里 面包 含 Visual Basic. 
NET、C#、Visual C++、ASP. NET 以 及 Visual FoxPro 等 组 件 。2003 年 ,在 对 . NET 
Framework 升级 为 1. 1 版 本 后 ,微软 发 布 了 Visual Studio . NET 的 一 个 较 小 的 升级 版 , 称 
作 Visual Studio. NET 2003。VS 2003 开发 工具 在 界面 上 并 没有 太 多 变化 ,只 是 开发 工具 
更 加 稳定 ,性 能 更 加 完善 。 之 后 又 推出 了 支持 . NET Framework 2. 0 的 Visual Studio 
2005 ,及 支持 . NET Framework 2. 0/3. 0/3.5 的 Visual Studio 2008 ,后 一 版 本 的 VS 新 增 了 
逾 250 个 新 功能 ,开发 能 力 更 完善 。 

为 满足 开发 人 员 ”* 构 造 客户 需要 的 产品 、 降 低 开 发 复杂 性 ,为 合作 伙伴 提供 增值 空间 、 促 
进 团队 沟通 能 力 ” 的 需求 ,同时 也 为 了 满足 软件 开发 生命 周期 内 的 所 有 角色 一 一 包括 系统 架 
构 师 ,解决 方案 架构 师 、 开 发 人 员 ,测试 人 员 ,项 目 经 理 以 及 最 终 用 户 等 一 一 都 能 参与 到 软件 
生产 中 来 的 要 求 , 2010 年 ,微软 推出 了 支持 . NET Framework 4. 0 并 且 支 持 开发 面向 
Windows 7 的 应 用 程序 的 开发 工具 Visual Studio 2010, 它 除了 支持 Microsoft SQL Server 
以 外 ,还 支持 IBM DB2 和 Oracle 数据 库 。 

其 中 的 Visual Studio Team System 2010, 是 微软 在 应 用 程序 复杂 性 日 益 增 加 的 情况 下 
为 解决 设计 、 开 发 和 部 署 软件 生命 周期 问题 的 一 套 工 具 集 。 它 包括 新 的 建 模 工具 ,包含 可 以 
图 形 化 显示 工程 和 类 ,以 及 它们 之 间 关 系 的 架构 浏览 器 ,并 支持 UML 活动 图 、 组 件 图 、 类 
图 、 串 行 图 以 及 用 例 图 ,从 而 扩展 了 Visual Studio 产品 线 , 增 强 了 软件 开发 团队 中 的 沟通 与 
协作 。 利 用 Visual Studio Team System, 开 发 团队 能 够 在 开发 过 程 的 早期 以 及 在 整个 开发 
过 程 中 确保 更 高 的 可 预见 性 和 更 好 的 质量 。 

在 VS 2010 中 有 两 个 重要 概念 :“ 项 目 ” 和 “解决 方案 *"。 可 以 这 样 来 理解 : 将 要 开发 的 
一 个 完整 的 应 用 系统 称 为 “解决 方案 ”; 一 个 完整 的 应 用 系统 又 由 若干 个 功能 完全 独立 的 程 
序 ( 例 如 安装 程序 、 类 库 程 序 ) 和 源 程序 文件 等 组 成 ,将 各 个 功能 独立 的 程序 和 源 程序 文件 分 
别 放 在 不 同 的 项 目 名 称 下 进行 管理 ,此 时 ,一 个 “解决 方案 ”就 将 由 多 个 “项 目 ” 组 成 。 因 此 一 
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个 “解决 方案 ”至 少 包含 一 个 “项 目 ”。 在 VS 2010 中 新 建 一 个 “项 目 ” 时 ,就 自动 创建 了 一 个 
包含 此 “项 目 ” 的 “解决 方案 ”, 其 他 新 建 的 “项 目 ” 可 以 添加 到 此 “解决 方案 "中 。 在 VS 2010 
工具 中 存盘 时 ,“ 解 决 方案 ”相关 信息 存放 在 扩展 名 为 *. sln” 和 *“. suo” 的 文件 中 ; 与 “项 目 ” 相 
关 的 信息 存放 的 文件 扩展 名 根据 “项 目 ” 类 型 有 所 变化 ,对 于 ASP. NET 网 站 的 C# 项 目 为 
“. csproj”, 对 于 Visual Basic 项 目 则 为 “. vbproj”。 

项 目 文件 包含 的 是 单个 编程 任务 特有 的 信息 ; 解决 方案 文件 则 包含 一 个 或 多 个 项 目的 
信息 。 解 决 方案 适 于 管理 多 个 相关 的 项 目 ,用 鼠标 双击 项 目 文件 (. csproj) 或 解决 方案 文件 
(.sln) 都 能 在 VS 2010 中 正常 打开 它们 。VS 2010 中 “解决 方案 ”和 “项 目 ” 文 件 的 默认 存放 路 
径 分 别 是 “我 的 文档 \Visual Studio 2010\Projects\” 和 “我 的 文档 \Visual Studio 2010\ WebSites 
\”。 当 开发 者 需要 废 置 新 建 的 项 目 时 ,将 上 述 两 个 文件 夹 下 对 应 的 项 目 文件 夹 删除 即 可 。 

以 . NET Framework 4.0 为 基础 的 Visual Studio 2010 集成 开发 环境 的 界面 被 微软 重 
新 设计 和 组 织 , 变 得 更 加 清晰 和 简单 .. NET Framework 4. 0 主要 增加 了 并 行 支持 ,微软 努 
力 使 Visual Studio 2010 更 适应 团队 开发 . 它 实现 了 生命 周期 管理 和 流程 管理 ,整合 了 单元 
测试 功能 。 在 VS 2005 中 ,系统 生成 的 代码 和 开发 者 的 代码 混合 在 一 起 ,而 在 VS 2010 中 
系统 生成 的 代码 几乎 全 部 隐藏 ,提供 了 很 多 新 的 有 用 的 Web 控件 ,工具 的 自动 化 程度 大 大 
提高 , 即 系统 可 自动 根据 开发 者 的 配置 为 开发 者 生成 大 量 源 代码 ,大 大 提高 了 开发 者 的 开发 
效率 。VS 2010 可 完成 很 多 功能 ,例如 可 用 VB、C# ,J# 和 C++ 等 语言 开发 C/S 结构 的 程 
序 等 , 随 着 使 用 功能 的 不 同 , 整 个 菜单 和 工具 条 等 都 会 自动 调整 。 

另外 ,美国 Mainsoft 公司 (http://dev. mainsoft. com/) 开发 了 一 个 软件 Visual 
MainWin for J2EE, 又 叫做 Grasshopper, 它 作为 插件 ,可 以 和 VS 2010 集成 在 一 块 。 通 过 
它 可 方便 地 将 .NET 开发 的 Web 系统 部 署 在 J2EE 环境 .实现 . NET 的 跨 平台 。 

下 面 我 们 仅 介绍 VS 2010 中 与 进行 Web 网 站 开发 相关 的 操作 界面 。 

2.2.2 VS 2010 开发 环境 主要 操作 界面 说 明 

VS 2010 是 一 个 非常 强大 的 开发 工具 ,很 难 做 到 将 各 种 操作 讲解 透彻 ,读者 需要 阅读 一 

些 专门 介绍 VS 2010 的 使 用 手册 ,并 怀 着 一 种 好 奇 的 心理 去 


尝试 各 种 不 同 的 操作 ,如 此 , 才 可 以 熟练 地 进行 各 项 操作 ,大 BEVYisual studio zolo 训 由 上 
大 提高 工作 效率 。 本 书 仅 对 VS 2010 开发 环境 的 主要 操作 界 


Ee im ream Foundution Sorver 
面 进行 说 明 。 sds 
1, 起 始 页 (Start Page) Eb 
首次 执行 VS 2010 时 会 显示 一 个 起 始 页 ,如 图 2-14 所 fa 的 


FoctoryMethod 
i 


示 。 此 页 中 “最 近 使 用 的 项 目 ” 将 显示 用 户 在 近期 内 利用 本 re 人 

VS 2010 创 建 和 修改 的 项 目 , 单 击 即 可 打开 该 项 目 。“ 打 开 " 有 。 罗 see 

两 个 可 选项 , 单 击 “ 打 开 ” 位 置 的 “项 目 ” 在 出 现 的 对 话 框 中 选 。 ws 

择 需要 在 VS 2010 中 打开 的 项 目 文件 即 可 。 单 击 “ 打 开 ” 位 置 。 加 ewe 

的 “网 站 ” 则 可 打开 如 图 2-15 所 示 的 “打开 网 站 ”对 话 框 ,选择 

相应 栏目 即 可 打开 一 个 已 经 存在 的 网 站 。 图 2-14 起 始 页 界面 
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在 图 2-15 所 示 对 话 框 的 左 侧 显示 的 是 欲 打开 网 站 的 位 置 。 其 中 ,文件 系统 ”表示 该 网 
站 在 用 户 计算 机 上 存放 的 目录 路 径 ;“ 本 地 IIS” 表 示 该 网 站 已 经 完成 了 IIS 的 相关 配置 ,不 
需要 具体 知道 网 站 在 用 户 计算 机 的 存放 位 置 ,只 需 单 击 在 IIS 中 配置 的 网 站 即 可 打开 该 网 
站 ;“FTP 站 点 ? 则 表示 用 户 欲 打开 的 网 站 是 存放 在 某 个 FTP 服务 器 上 的 ;“ 远 程 站 点 ” 表 
示 用 户 欲 打开 的 网 站 是 已 经 发 布 在 Internet 上 的 网 站 。 


选择 要 打开 的 文件 去 (S)- 息 x 


图 2-15 “打开 网 站 "对 话 框 


对 于 利用 VS 2010 进行 Web 开发 的 用 户 ,可 单 击 菜单 “文件 "| “新建 >|* 网 站 ”, 然 后 选 
择 一 种 开发 语言 如 C# , 单 击 *ASP. NET 网 站 ”, 输 入 “Web 位 置 ? 即 网 站 存放 的 位 置 , 即 可 
创建 一 个 新 的 网 站 开发 环境 。 

网 站 的 存放 位 置 有 3 种 选项 ,分 别 是 “文件 系统 " “HTTP” 和 “FTP”。 对 于 文件 系统 ， 
新 建 的 网 站 可 以 放 在 本 地 或 共享 文件 夹 下 ; 对 于 “HTTP” 选 项 ,如 图 2-16 所 示 ,表示 新 建 的 
网 站 将 直接 放 在 某 个 Web 服务 器 上 ,此 时 需要 你 先 在 Web 服务 器 上 新 建 一 个 空 的 网 站 (也 
即 主 目录 下 无 任何 文件 ) ,此 时 再 在 “位 置 ? 处 输入 "http:// 网 站 IP 地 址 ”, 新 建 网 站 生成 的 
文件 就 会 直接 放 在 服务 器 上 。 对 于 “FTP” 选 项 ,用 户 新 建 的 网 站 可 以 通过 FTP 协议 放 到 
FTP 服务 器 上 。 

2. 菜单 栏 和 工具 条 (Menu Bar and Tool Strip) 


图 2-17 所 示 是 VS 2010 在 新 建 一 个 网 站 后 显示 的 主 菜单 和 工具 条 。 主 菜单 由 “文件 ”、 
“编辑 ”“ 视 图 ”等 子 菜单 组 成 。 工 具 条 是 菜单 项 的 图 标 显 示 , 以 方便 用 户 使 用 。 用 户 可 根据 
需要 来 动态 显示 或 隐藏 工具 条 。 布 击 主 菜单 出 现 的 快捷 菜单 里 面包 括 了 所 有 的 工具 条 ,可 
以 选择 让 其 显示 或 隐藏 。 一 般 工 具 条 会 根据 用 户 使 用 的 场合 动态 显示 或 隐藏 。 如 果 用 户 不 
知道 某 个 图 标的 具体 含义 ,可 将 鼠标 指针 放 在 该 图 标 上 ,以 便 动态 显示 图 标的 用 途 。 

主 菜 单 里 包含 了 用 于 管理 IDE(Integrated Development Environment ,集成 开发 环境 )、 
编译 和 执行 程序 的 所 有 命令 ,并 随 着 项 目的 不 同 而 有 所 区 别 。 
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:Visual cx 
空 ASPJNET 网 站 


ASP.NET Dynamic Data 实体 网 站 


4 ASP.NET Dynamic Data Linq to SQL 网 站 


加 wm 
六 ASPNET Reports 网 站 


仿 ASP.NET Web 服务 


2-16 “新 建 网 站 ”对 话 框 


2-17 主 菜 单 和 工具 条 


图 2-18 所 示 为 “文件 "“ 编 辑 "“ 视 图 " 子 菜单 。“ 网 站 ”“ 生 成 “调试 " 子 菜单 如 图 2-19 
所 示 。“ 工 具 ”“ 窗 口 "“ 帮 助 " 子 菜单 如 图 2-20 所 示 。 
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图 2-18 “文件 "“ 编 辑 "“ 视 图 ”菜单 
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天 
国 
加 


图 2-19 “网 站 ”“ 生 成 “调试 ” 子 菜 单 


图 2-20 “工具 ”“ 窗 口 "“ 帮 助 ” 子 菜单 


(1) “文件” 菜单 可 用 于 打开 和 保存 项 目 、 网 站 及 文件 ,另外 它 还 列 出 了 最 近 打 开 的 文件 
和 项 目 等 ,方便 用 户 快速 选 定 项 目 或 文件 并 打开 。 

(2)“ 编 辑 ”" 菜 单 包 括 了 在 窗 体 中 设计 或 编写 程序 代码 时 将 使 用 的 各 种 编辑 命令 。 例 如 
利用 “书签 ”功能 可 以 在 打开 的 代码 窗口 中 多 个 位 置 设置 书签 ,然后 就 可 以 在 书签 之 间 进 行 
跳 转 ; 也 可 以 在 另 一 个 代码 窗口 中 设置 书签 ,实现 多 个 代码 窗口 之 间 的 书签 跳 转 ,这 大 大 方 
便 了 开发 者 对 代码 的 编辑 操作 。 读 者 应 记 住 这 些 常用 快捷 键 :“Ctrl 二 KK?”, 设 置 或 取消 书 
签 ;“Ctrl 十 KN”, 转 到 下 一 个 书签 ;“Ctrl 十 KP”, 转 到 上 一 个 书签 。 

(3)“ 视 图 ”菜单 包括 了 用 于 显示 或 隐藏 集成 开发 环境 中 的 各 种 窗口 .工具 栏 等 的 命令 。 
这 些 窗口 有 “隐藏 "“ 自 动 隐藏 "“ 浮 动 "“ 可 停靠 ”“ 选 项 卡 式 文档 ”5 种 属性 .“ 隐 藏 ”就 是 
将 窗口 隐藏 掉 , 需 要 时 可 通过 视图 菜单 重新 打开 。“ 自 动 隐藏 * 就 是 窗口 平常 缩 成 为 一 个 标 
识 , 当 鼠标 停靠 在 其 上 时 , 则 窗口 打开 ,鼠标 离开 后 ,又 缩 成 一 个 标识 。“ 浮 动 ” 窗 口 是 指 这 个 
窗口 不 依附 于 任何 窗口 ,是 一 个 独立 窗口 。“ 可 停靠 ”窗口 是 指 可 将 窗口 依附 到 另 一 个 窗口 
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“选项 卡 式 文档 ”就 是 将 窗口 变 成 主 窗口 中 的 一 个 选项 卡 。 在 VS 2010 中 ,每 一 个 开 
发 者 可 以 根据 自己 的 爱好 ,随意 打开 和 放置 各 种 窗口 ,以 便于 各 种 操作 ,但 如 果 放 置 的 窗 
口 太 多 ,势必 会 干扰 开发 者 在 主 窗 口中 的 操作 ,因此 可 以 尝试 用 鼠标 拖 动 的 方式 布置 各 
种 窗口 。 

(4)“ 网 站 ”菜单 主要 用 于 执行 “添加 新 项 ”“ 添 加 现 有 项 ”“ 复 制 网 站 ”“ 添 加 引用 ”、 
“添加 Web 引用 ”和 * 设 为 启动 项 ”等 命令 。“ 解 决 方案 "中 如 果 存 在 多 个 “项 目 ”, 在 运行 的 时 
候 , 只 能 有 一 个 “项 目 ” 作 为 启动 项 ,因此 需要 选择 某 个 项 目 作为 启动 项 。 

(5)“ 生 成 ”菜单 主要 用 于 “生成 解决 方案 “重新 生成 解决 方案 ”"“ 生 成 网 站 ”和 “重新 
生成 网 站 ”等 命令 。“ 生 成 网 站 ”就 是 对 “解决 方案 ”中 的 所 有 “项 目 ” 进 行 语 法 检查 和 编译 。 
如 果 出 错 则 显示 错误 信息 。 

(6)“ 调 试 "菜单 主要 用 于 “启动 调试 " “开始 执行 "和 “新 建 断 点 ”等 命令 。 

(7)“ 工 具 ” 子 菜单 主要 包括 “连接 到 数据 库 ”“ 连 接 到 服务 器 "和 “选项 ”等 命令 。“ 连 接 
到 数据 库 ? 可 以 通过 设置 连接 数据 库 的 参数 ,在 “服务 器 资源 管理 器 ”中 管理 数据 库 , 实 现 数 
据 库 系统 客户 端的 操作 功能 ,如 建 表 、 查 看 数据 、 添 加 或 修改 存储 过 程 等 。“ 连 接 到 服务 器 ” 
可 以 设置 参数 连接 到 某 个 网 络 服务 器 上 ,对 某 个 网 络 服务 器 进行 管理 。 例 如 可 以 启动 或 停 
止 一 个 后 台 服 务 等 。VS 2010 的 很 多 参数 设置 都 在 “选项 ”中 进行 ,例如 代码 编辑 区 的 文字 
大 小 和 字体 等 ,用 户 可 将 所 有 设置 的 参数 导出 到 某 个 文件 中 ,需要 的 时 候 通 过 导入 可 进行 参 
数 设置 的 恢复 。 

(8)“ 窗 口子 菜单 主要 用 于 布局 工程 中 的 窗 体 , 包 括 * 新 建 窗 口 "“ 拆 分 "“ 浮 动 "“ 可 
停靠 >“ 选 项 卡 式 文 档 ”“ 自 动 隐藏 > 和 * 隐 藏 ” 等 命令 ,实现 对 窗口 的 管理 。 

9)“ 帮 助 " 子 菜单 提供 帮助 信息 ,方便 用 户 学 习 和 掌握 . NET 的 使 用 。 

3. 解决 方案 资源 管理 器 (Solution Explorer) 

“解决 方案 资源 管理 器 ”窗口 列 出 了 解决 方案 中 的 所 有 项 目 及 项 目 所 包含 的 文件 ,如 
图 2-21 所 示 。 

解决 方案 的 起 始 项 目 是 在 解决 方案 执行 时 所 运行 的 项 目 。 该 项 目 在 解决 方案 资源 管理 
器 中 采用 粗 体 文 本 显示 。 位 于 解决 方案 资源 管理 器 右 侧 的 三 角形 图 标 分 别 用 于 展开 树 ( 即 
该 文件 下 还 包含 其 他 子 文件 ) 和 折 释 树 ( 该 文件 属于 某 个 文件 或 文件 夹 )。 解 决 方案 资源 管 
理 器 包含 一 个 工具 栏 , 在 文件 类 型 为 “网 站 ” 情史 下 名 


括 6 个 图 标 , 即 “ 属 性 ”…“ 刷 新 "“ 嵌 套 相关 文件 "“ 查 ET 
类 图 "复制 网 站 ”和 *ASP. NET 配置 *。 i ee LL 
击 其 中 某 个 项 目 , 则 出 现 快捷 菜单 ,可 以 创建 文件 夹 、 |S 名 加 mwxo 
添加 新 项 等 ,快捷 菜单 中 很 多 选项 等 同 于 主 菜单 中 选 ”SS 旦 名 ee 
项 ,以 方便 用 户 的 使 用 。 Er | lt 

4. 工具 箱 (Tool Box) i 辆 hmso'， | 

国 sh 局 动 选项 (0).,。 

工具 箱包 含 了 可 重用 的 软件 组 件 ( 亦 称 为 控件 )。 号 宫 认为 Ba 上 
工具 箱 中 的 控件 在 面向 对 象 编程 中 可 视 为 一 个 个 不 同 。 “or | Ep 
的 类 ,在 可 视 化 编程 中 ,程序 员 只 需 将 这 些 控件 拖 到 一 。 


个 窗 体 上 ,就 实现 了 类 的 实例 化 , 即 创建 了 具有 实际 含 。 “图 2-21 解决 方案 资源 管理 器 
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义 的 对 象 。 

工具 箱 中 相关 组 件 构成 了 一 个 个 分 组 ,如 图 2-22 所 示 ,要 想 展 开 一 个 组 的 成 员 , 只 需 单 
击 组 名 即 可 。 

程序 员 如 果 想 将 某 个 控件 添加 到 自己 的 应 用 程序 中 去 ,直接 将 该 控件 拖 到 应 用 程序 的 
窗 体 上 .或 是 直接 双击 该 控件 都 可 。 

5. 属性 窗口 (Properties Windows) 

属性 窗口 用 于 处 理 窗 体 或 控件 的 属性 。 属 性 指定 了 同一 个 控件 有 关 的 信息 。 每 个 控件 
都 有 自己 的 一 套 属性 。 在 属性 窗口 底部 包含 了 对 所 选 属性 的 说 明 ,如 图 2-23 所 示 。 
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文档 中 所 有 活动 链接 的 藤 色 . 


图 2-22 “工具 箱 ” 的 组 件 构成 图 2-23 “属性 ”窗口 


在 属性 窗口 左 侧 列 出 了 控件 的 属性 ,右边 一 列 显示 了 不 同属 性 的 当前 值 。 属 性 窗口 同 
样 包含 了 一 个 工具 栏 。 工 具 栏 最 左边 的 两 个 图 标 分 别 用 于 根据 属性 用 途 来 进行 分 组 排列 和 
对 属性 按照 属性 的 拼音 字母 顺序 来 排列 。 属 性 窗口 顶部 有 一 个 对 象 下 拉 列 表 框 ,可 以 让 开 
发 者 直接 选 定 某 个 对 象 进行 属性 设置 。 

6. VS 2010 中 几 个 重要 概念 


1) HTML 页 

该 页 面 中 只 含有 HTML 控件 ,HTML 页 所 对 应 的 代码 中 不 包含 Web 服务 器 运行 的 代 
码 。 新 建 一 个 HTML 页 的 方法 是 : 右 击 “解决 方案 资源 管理 器 "中 “项 目 ” 或 文件 夹 , 在 出 现 
的 快捷 菜单 中 选择 “添加 新 项 ”, 在 出 现 的 对 话 框 中 选择 “HTML 页 ”, 输 入 对 应 文件 名 , 单 击 
“添加 ”按钮 后 ,就 生成 了 一 个 HTML 页 。 单 击 主 窗口 区 域 左 下 方 的 “设计 显示 HTML 
页 ,可 以 在 其 上 放置 工具 箱 中 的 各 种 HTML 控件 。 单 击 主 窗口 区 域 左 下 方 的 “ 源 ” 则 可 以 
查看 HTML 页 对 应 的 源 代码 , 源 代码 存放 在 扩展 名 为 “. HTM” 的 文件 中 。“ 设 计 ” 和 “ 源 ” 
之 间 的 切换 快捷 键 是 Ctrl 十 PgUp 或 Ctrl 十 PgDn。HTML 页 中 的 内 容 即 为 用 户 在 浏览 器 
中 看 到 的 效果 。 此 HTML 文件 又 称 HTML 网 页 文件 或 HTML 页 面 文件 。 如 要 切实 查看 
它 在 浏览 器 中 的 效果 ,用 鼠标 右 击 此 文件 名 ,选择 “ 设 为 起 始 页 ”, 按 下 功能 键 F5, 就 可 以 在 
浏览 器 中 看 到 实际 效果 ,也 可 进入 “ 源 ” 或 “设计 ”界面 ,在 右键 菜单 中 选择 “在 浏览 器 中 查 
看 ”。HTML 页 面 不 需要 Web 服务 器 作 任 何 处 理 。 
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2) Web 窗 体 


该 窗 体 中 可 以 放置 工具 箱 中 的 各 种 控件 ,包括 Web 标准 控件 和 HTML 控件 等 , Web 
窗 体 所 对 应 的 代码 中 不 仅 包 含 了 HTML 源 代码 ,而且 还 包含 了 Web 服务 器 运行 的 代码 ,也 
即 是 用 户 在 浏览 器 中 查看 此 页 面 时 ,需要 Web 服务 器 利用 它 的 内 存 `.CPU 硬盘 等 系统 资源 
对 Web 窗 体 进行 处 理 生成 新 的 HTML 页 面 后 再 传送 给 浏览 器 。 新 建 一 个 Web 窗 体 的 方 
法 是 : 右 击 “解决 方案 资源 管理 器 ”中 “项 目 ” 或 文件 夹 ,在 出 现 的 快捷 菜单 中 选择 “添加 新 
项 ”, 在 出 现 的 对 话 框 中 选择 “Web 窗 体 ”, 选 择 编程 语言 C# ,输入 对 应 文件 名 (不 妨 输 为 
myWeb) , 单 击 “ 添 加 ”按钮 后 ,就 生成 了 一 个 Web 窗 体 。 在 “解决 方案 ”中 会 形成 两 个 文件 
“myWeb. aspx” 和 “myWeb. aspx. cs”, 其 中 “myWeb. aspx” 中 存放 的 是 Web 窗 体 所 对 应 的 
HTML 源 代码 ;“myWeb. aspx. cs” 中 存放 的 是 Web 窗 体 中 Web 服务 器 运行 的 C# 代码。 
同样 单 击 VS 2010 主 窗口 区 域 左 下 方 的 “设计 ”显示 Web 窗 体 , 可 以 在 其 上 放置 工具 箱 中 的 
所 有 各 种 控件 。 单 击 主 窗口 区 域 左下 方 的 * 源 ” 则 可 以 查看 Web 窗 体 对 应 的 HTML 源 代 
码 。 在 处 于 “设计 ? 或 者 “ 源 ” 状 态 下 按 下 功能 键 F7 可 以 进入 服务 器 后 台 代码 编辑 区 , 即 在 
VS 2010 主 窗口 中 打开 对 应 的 C# 人 代码。 我 们 将 “. aspx” 文 件 称 为 Web 服务 器 页 面 文件 。 
用 鼠标 右 击 此 “. aspx? 文 件 ,选择 * 设 为 起 始 页 ”, 按 下 功能 键 F5, 就 可 以 在 浏览 器 中 看 到 
Web 窗 体 即 Web 服务 器 页 面 的 实际 效果 。 

因为 Web 服务 器 页 面 是 在 Web 服务 器 中 进行 处 理 后 形成 标准 的 HTML 页 面 文 件 传 
送 到 客户 端的 浏览 器 中 ,因此 我 们 可 以 这 样 说 ,用 Web 窗 体 开发 的 页 面 ,或 者 说 用 Web 窗 
体 开发 的 应 用 程序 ,是 与 客户 端 平台 无 关 的 应 用 程序 , 即 不 论 用 户 的 浏览 器 类 型 是 什么 ,也 
不 论 其 使 用 的 计算 机 类 型 是 什么 ,它们 都 可 以 与 Web 应 用 程序 进行 交互 。 同 时 可 优化 
Web 窗 体 应 用 程序 ,以 利用 最 新 浏览 器 中 的 内 置 功能 来 增强 性 能 和 提高 响应 能 力 。 表 2-1 
列 出 了 HTML 页 和 Web 窗 体 的 比较 。 


表 2-1 HTML 页 和 Web 窗 体 的 比较 


比较 类 别 HTML 页 Web 窗 体 
部 署 没有 客户 端 部 署 ; 客户 端 只 需要 一 个 浏 | 没有 客户 端 部 署 ; 客户 端 只 需要 一 个 
览 器 。 无 须 安装 . NET Framework 浏览 器 。 但 服务 器 必须 运行 
Microsoft . NET Framework 
响应 Web 服务 器 对 HTML 页 面 文件 不 作 任 | Web 服务 器 要 对 页 面 文件 进行 处 理 ， 
何 处 理 , 服 务 器 响应 快 服务 器 响应 慢 
平台 不 依赖 任何 平台 依赖 Windows 操作 系统 平台 
图 片 处 理 图 片 直 接 从 Web 服务 器 传送 到 浏览 器 | 可 以 在 服务 器 上 使 用 GDI 二 来 创建 
缓冲 区 显示 自 定义 图 形 
数据 库 操作 不 能 进行 数据 库 操作 可 以 连接 数据 库 服 务 器 进行 数据 操作 
代码 安全 性 代码 在 浏览 器 中 原封 不 动 再 现 可 以 完全 编译 后 运行 ,浏览 器 中 只 能 
看 到 处 理 后 的 HTML 代码 
在 Web 服务 器 上 的 | 不 能 在 Web 服务 器 中 作 任何 处 理 可 以 在 Web 服务 器 中 执行 读 写 文件 、 
操作 复制 文件 等 各 项 后 台 处 理 


3) 代码 分 离 (Code Behind) 
Web 窗 体 所 对 应 的 代码 中 包含 了 HTML 源 代码 和 Web 服务 器 运行 的 代码 。 在 原先 
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的 ASP 技术 中 将 这 两 种 代码 混合 在 一 个 扩展 名 为 “. asp” 文 件 中 。 在 新 的 Web 窗 体 中 仍然 
可 以 采用 混合 方式 将 两 种 代码 混合 在 一 个 扩展 名 为 “. aspx” 的 文件 中 。 但 这 样 不 利于 网 页 
界面 设计 者 和 后 台 服 务 器 运行 代码 编写 者 之 间 各 司 其 职 地 进行 代码 编写 ,可 能 会 造成 相互 
干扰 现象 ,不 利于 开发 者 之 间 的 分 工 协作 。 因 此 VS 2010 提供 了 一 种 “代码 分 离 ” 技 术 来 解 
决 这 个 问题 ,即将 HTML 源 代码 和 Web 服务 器 运行 的 代码 不 放 在 单个 aspx 文件 中 ,而 仅 
将 HTML 源 代码 放 在 aspx 文件 ,将 Web 服务 器 运行 的 代码 放 在 另 一 个 文件 中 ,其 代码 可 
用 VB、C# 、J# 等 任何 一 种 语言 来 编写 ,车 用 C# 来 编写 , 则 此 文件 的 扩展 名 为 “. cs”。 在 
aspx 文件 中 用 如 下 page 语句 将 两 个 文件 相互 关联 起 来 : 


<$ 四 Page Language = "C#" AutogventWireup = "true" CodeFile = "myWeb. aspx. cs" Inherits = 
"myWeb"” %> 


这 样 一 来 ,采用 代码 分 离 技术 既 解 决 了 分 工 协作 的 问题 ,还 可 以 实现 HTML 界面 不 停 地 追 
随 潮流 ,后 台 代码 稳定 地 实现 业务 处 理 。 

4) 流 布 局 和 网 格 布局 

默认 情况 下 ,HTML 页 或 ASP. NET 网 页 中 的 元 素 以 它们 在 标记 中 的 出 现 顺序 呈现 ， 
这 种 方式 称 为 流 布局 (FlowLayout)。 在 流 布局 状态 下 , 当 某 个 控件 从 工具 箱 被 拖 放 到 Web 
窗 体 中 的 时 候 , 不 能 用 鼠标 随意 移动 它 。 

也 可 以 采用 二 维 方式 对 HTML 页 或 ASP. NET 网 页 中 的 元 素 进行 布局 ,使 用 水 平和 
垂直 坐标 将 元 素 定 位 到 页 面 中 的 任何 位 置 ,此 布局 方式 称 之 为 网 格 布局 (GridLayout) 。 在 
网 格 布局 状态 下 , 当 你 将 某 个 控件 从 工具 箱 拖 放 到 Web 窗 体 中 的 时 候 ,可 用 鼠标 随意 移动 它 。 

VS 2010 默认 使 用 流 布局 方式 ,要 更 改 成 网 格 布局 ,操作 过 程 如 下 : 单 击 菜单 “工具 ”| 
“选项 ” ,出现 图 2-24 所 示 的 “选项 ”对 话 框 中 ,选择 “CSS 样式”, 选中 右 侧 最 后 一 项 , 即 采 用 
“绝对 定位 ?方式 。 


ie 【ed 
御 规 样式 应 用 模式 
字体 和 基色 
格式 设置 回 手动 应 用 样式 (M) 日 自动 应 用 样式 (A) 
验证 
CSS 仅 重 用 市 有 "style" 前 要 的 类 (O) 
CSS 样式 为 图 你 使 用 宽度 和 高 度 符 性 而 不 是 CSS(U) 
园 对 租 体 和 冬 体 文本 使 用 <strong> 和 <em>(S) 
团 生成 样式 时 使 用 速记 属性 (FE) 


同 对 于 使 用 工具 梢 、 车 贴 或 拖 放手 作 添加 的 控件 ， 构 定位 方式 更 改 为 坎 对 定位 (P) 


显示 所 有 设置 A) [ 达 |] 取消 


图 2-24 “选项 ”对 话 框 
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由 于 网 格 布局 方式 在 HTML 页 面 中 增加 了 元 素 定位 信息 ,而 流 布局 方式 则 没有 ,所 以 
网 格 布局 方式 加 大 了 网 页 文件 所 占用 的 字 节 数 ,在 网 络 传送 的 时 候 , 比 流 布局 方式 慢 ,但 流 
布局 方式 很 难 定位 元 素 位 置 , 因 而 大 都 采用 表格 来 进行 定位 ,而 有 时 需要 在 表格 的 单元 格 中 
嵌入 另外 一 个 表格 ,这 就 使 得 页 面 代码 文件 看 起 来 非常 复杂 ,很 难 分 析 和 维护 。 对 于 初学 者 
来 说 ,建议 采用 网 格 布局 方式 ,这样 可 以 很 方便 地 用 鼠标 定位 各 种 控件 。 


2.2.3 在 VS 2010 中 开发 Web 应 用 系统 的 一 般 过 程 


下 面具 体 地 介绍 在 VS 2010 中 开发 Web 应 用 系统 的 一 般 过 程 。 本 书后 续 章 节 的 例子 
都 将 在 这 个 环境 下 进行 。 在 用 VS 2010 开发 Web 应 用 系统 的 时 候 , 存 在 两 种 开发 方式 : 个 
人 开发 方式 和 团队 开发 方式 。 个 人 开发 方式 是 指 对 于 一 个 小 型 应 用 系统 , 单 人 独 马 就 可 完 
成 系统 的 开发 ; 而 团队 开发 方式 是 指 完成 一 个 Web 应 用 项 目 需 要 多 人 合作 、 共 同 开 发 。 因 
此 团队 开发 方式 相对 个 人 开发 方式 要 复杂 得 多 。 下 面 分 别 介绍 在 VS 2010 中 进行 个 人 开 
发 和 团队 开发 的 具体 过 程 。 

1. 个 人 开发 过 程 

在 打开 VS 2010 后 ,选择 “文件 ”1“ 新 建 ”"1“ 网 站 ”, 弹 出 图 2-16 所 示 的 “新 建 网 站 ”对 话 
框 , 当 选择 新 建 网 站 时 ,默认 的 模板 为 ASP. NET 网 站 。 用 户 可 以 在 “位 置 ? 栏 的 第 一 个 下 
拉 列 表 框 中 选择 网 站 存放 的 位 置 ,在 该 下 拉 列 表 框 的 右 侧 列表 框 中 输入 或 者 选择 存放 的 路 
径 。 选 择 该 网 站 后 台 服 务 器 运行 程序 所 采用 的 语言 ,然后 单 击 “ 确 定 ” 按 钮 ,VS 2010 将 自动 
生成 包含 一 个 项 目的 解决 方案 。 如 图 2-25 所 示 。 


Th Paae TanguagesrCW ntOEYeRETCUPEtrU CodeFile=" Defsult aspr. co Inherit=" Default™ Wy 


2-25 ”新建 网 站 的 “解决 方案 ?资源 管理 器 
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如 第 1 章 所 述 ,开发 一 个 Web 应 用 系统 实质 上 就 是 建立 一 个 Web 网 站 , 它 是 由 主 目录 
和 子 目录 以 及 页 面 文件 .图 片 文 件 等 组 成 的 。 在 这 里 我 们 可 以 将 图 2-25 所 示 “ 解 决 方案 资 
源 管理 器 ”中 的 “d:\…\ Website2” 看 成 主 目录 ,然后 在 下 面 就 可 以 构建 各 个 子 目 录 。 此 处 
VS 2010 已 经 自动 创建 了 App_Data 子 目 录 。 

创建 子 目录 的 方法 是 : 用 鼠标 右 击 “d:\…\Website2”, 在 出 现 的 快捷 菜单 中 选择 “新 建 
文件 夹 ”, 然 后 输入 文件 夹 名 称 即 可 。 以 同样 的 方式 可 新 建 多 个 文件 夹 以 用 于 不 同 目的 。 

如 果 要 将 现 有 的 图 片 文 件 或 者 用 其 他 工具 如 Dreamweaver 等 做 好 的 网 页 放 到 本 项 目 
的 文件 夹 中 来 ,有 两 种 方法 : 

(1) 先 最 小 化 VS 2010 开发 工具 ,然后 找到 这 些 文件 用 鼠标 框 选 后 ,复制 到 剪贴 板 , 然 
后 再 最 大 化 VS 2010, 在 “解决 方案 资源 管理 器 "中选 定 某 个 文件 夹 ,用 鼠标 快捷 菜单 中 的 
“粘贴 ?命令 就 可 以 将 已 有 的 文件 添加 进来 。 也 可 以 通过 Windows 系统 的 “拖拉 ”方式 实现 。 

(2) 在 "解决 方案 资源 管理 器 ”中选 定 某 个 文件 夹 ,选择 鼠标 快捷 菜单 中 的 “添加 现 有 
项 ”, 找 到 这 些 文件 后 ,就 可 以 将 已 有 的 文件 添加 进来 。 

开发 者 可 以 重新 命名 “解决 方案 资源 管理 器 ”的 文件 夹 名 称 或 者 文件 名 称 , 方 法 是 选中 
该 文件 夹 或 文件 ,通过 鼠标 快捷 菜单 中 的 “ 重 命 名 "完成 换 名 工作 ; 也 可 按 下 功能 键 F2 来 完 
成 。 文 件 夹 和 文件 的 名 称 一 般 不 宜 取 过 长 ,原则 是 尽量 短 但 又 具有 清楚 的 含义 。 因 为 文件 
夹 或 文件 的 名 称 将 出 现在 网 页 中 ,在 网 络 上 传送 网 页 时 会 占用 一 些 带 宽 。 

在 Web 窗 体 上 加 入 控件 ,只 需要 把 工具 箱 上 的 控件 拖 
到 Web 窗 体 , 而 后 可 按 下 功能 键 F4 在 “属性 ”窗口 中 进行 utron3 SyemawebsULAecConroe 国 
各 项 参数 设置 。 如 要 进行 事件 编程 ,对 于 HTML 控件 只 1 
要 双击 该 控件 ,就 自动 进入 HTML 页 面 代 码 生 成 的 
JavaScript 脚本 中 ; 对 于 Web 标准 控件 , 则 在 图 2-26 所 示 
的 属性 窗口 中 , 单 击 * 闪 电 ” 图 标 , 选 择 该 控件 事件 列表 中 某 
项 ,输入 自 定义 的 事件 名 称 或 者 双击 该 事件 ,系统 自动 取 定 
事件 名 ,就 可 在 aspx 的 代码 分 离 文件 C# 中 进行 事件 图 2-26 属性 窗口 中 的 事件 设 定 
编码 。 
一 般 地 ,对 于 Web 标准 控件 ,在 它 获得 焦点 后 直接 双击 它 ,就 可 进入 该 控件 的 鼠标 单 击 
事件 编程 。 要 从 C# 代码 状态 转 到 Web 窗 体 设 计 状 态 , 按 下 功能 键 F7, 若 再 转 到 网 页 代 
码 , 按 下 快捷 键 “Ctrl 十 PgDn” 即 可 。 

选择 “调试 ”1 “启动 调试 ”或 直接 按 快 捷 键 Ctrl 十 F5( 不 调试 ) 或 F5 键 (启动 调试 ) ,系统 
会 打开 一 个 Internet Explorer 窗口 并 载 入 Web 页 面 ( 即 aspx 文件 )。 可 在 后 台 C# 程 序 中 
采用 断 点 调试 。 

一 个 Web 应 用 系统 可 由 多 个 子 系统 构成 ,每 个 子 系统 一 般 可 划分 为 多 个 功能 模块 , 通 
过 设计 一 个 菜单 系统 将 子 系统 和 各 个 功能 模块 串 接 在 一 起 ,并 在 其 中 设置 用 户 的 操作 权限 。 
Web 应 用 系统 最 终 将 分 解 成 一 系列 与 网 页 有 关 的 文档 ,它们 存放 在 “解决 方案 资源 管理 器 ” 
的 各 个 文件 夹 下 。 

当 完 成 Web 应 用 系统 所 有 模块 开发 后 ,通过 “生成 网 站 ”和 “发 布 网 站 ” 即 可 完成 Web 
应 用 系统 的 开发 。 
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2. 团队 开发 过 程 


一 个 Web 应 用 系统 的 成 功 开发 ,一 般 来 说 不 会 是 一 个 人 孤军 奋战 的 结果 ,大 都 需要 组 
建 一 个 开发 团队 共同 协助 来 完成 系统 的 开发 ,以 缩短 系统 的 开发 周期 ,提高 软件 的 开发 效 
率 。 用 VS 2010 来 进行 某 个 Web 应 用 系统 开发 ,开发 团队 成 员 通常 需要 采用 如 图 2-27 所 
示 的 团队 成 员 协 作 开 发 模型 来 完成 目标 。 团 队 成 员 在 各 自 的 计算 机 上 共同 协助 完成 软件 开 
发 ,这 里 因此 就 涉及 源 代码 共享 和 源 代码 版 本 管理 问题 。 


源 代 码 控制 
服务 器 


源 代码 控制 全 | 


VS 2010 开发 者 1 


源 代 码 控制 Ea 
客户 端 


VS 2010 开发 者 2 


源 代码 控制 


VS 2010 开发 者 n 
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开发 者 之 间 需 要 相互 查看 彼此 编写 的 源 代码 ,但 又 不 能 随便 修改 别人 的 代码 ,这 就 叫 源 
代码 共享 。 开 发 者 每 开发 一 个 模块 或 一 个 功能 ,可 能 由 于 Bug 而 不 断 地 进行 修改 ,在 此 过 
程 中 需要 保留 不 同 的 版 本 ,以 便 日 后 的 恢复 或 其 他 处 理 ,这 就 是 源 代码 版 本 管理 。 

在 团队 开发 过 程 中 ,一 般 的 方法 是 项 目 组 长 采用 前 述 的 个 人 开发 过 程 , 先 生成 一 个 解决 
方案 。 此 解决 方案 中 已 将 各 种 目录 建 好 ,并 分 别 规定 每 一 个 目录 的 用 途 ,例如 哪些 目录 存放 
共享 的 图 片 文件 ,哪些 目录 存放 用 户 上 载 的 文件 , 哪 一 个 开发 者 管理 哪 一 个 目录 ,等 等 ,并 将 


建 好 的 开发 框架 放 到 源 代码 控制 服务 器 上 ; 然后 “开发 者 1”“ 开 发 者 2”、…… 、 开 发 者 n” 
通过 源 代码 控制 客户 端 软件 获取 相同 的 “解决 方案 ”, 最 后 互相 分 工 协作 完成 Web 应 用 系统 
的 开发 。 


当 完 成 Web 应 用 程序 所 有 模块 开发 后 ,各 个 开发 者 将 编写 的 最 新 程序 放 到 源 代码 控制 
服务 器 上 ,项 目 组 长 在 他 的 客户 端 获取 所 有 最 新 源 代码 后 进行 集成 调试 和 测试 。 最 后 通过 
“生成 网 站 ”和 “发 布 网 站 ”完成 Web 应 用 系统 的 开发 。 要 说 明 的 是 独立 开发 人 员 也 可 在 单 
机 上 使 用 源 代码 控制 软件 来 管理 自己 不 同 的 源 代码 版 本 历史 。 本 书 将 在 下 两 节 具 体 介绍 如 
何 进行 源 代码 的 控制 ,以 及 如 何 进行 网 站 的 发 布 。 


2.2.4 开发 模式 对 比 


1. 传统 开发 模式 


在 ASP. NET 世界 中 ,所 谓 传统 的 软件 开发 模式 是 基于 ASP. NET Web Form 的 开发 
模式 ,软件 开发 人 员 采 用 可 视 化 的 软件 开发 工具 Visual Studio, 在 该 工具 的 Web 页 面 设计 
器 中 拖 放 控件 、 对 表单 的 属性 进行 设置 即 可 。 同 时 ,软件 开发 人 员 通 过 编写 相应 代码 来 响应 
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控件 的 事件 ,从 而 使 程序 的 开发 操作 简单 直观 化 ,使 Web 开发 类 似 于 开发 一 个 基于 窗口 的 
应 用 程序 一 样 , 这 样 的 Web 开发 模式 在 . NET 被 称 为 Web Form 开发 模式 。 由 于 服务 器 控 
件 中 封装 了 很 多 东西 ,软件 开发 人 员 很 难 了 解 HTML 是 如 何 运行 的 ,而 在 客户 端 得 到 一 个 
包含 大 量 ViewState 的 Web 页 面 :使 得 Web 页 面 尺寸 远 远 超过 所 需要 的 内 容 , 进 而 影响 页 
面 的 运行 效率 ,难以 对 页 面 进行 测试 。 

2. MVC 开发 模式 

ASP.NET MVC 开发 模式 是 基于 MVC 模式 开发 的 一 个 易于 被 测试 的 框架 , 它 可 以 代 
替 WebForm 模式 创建 Web 应 用 程序 ,并 继承 了 ASP. NET 功能 特性 ,具有 易于 单元 测试 、 
可 扩展 、 可 替换 的 优秀 特性 ,在 应 用 程序 的 开发 过 程 中 ,不 需要 数据 回 传 和 保存 视图 的 状态 ， 
软件 开发 人 员 完 全 把 握 Web 页 面 的 呈现 过 程 ,与 此 同时 , 它 也 支持 WebForm 中 的 有 关 特 
性 ,而 放弃 了 对 相关 服务 器 控件 的 支持 。 

3. ASP.NET MVC 的 优势 

相对 于 WebForm 开发 模式 ,ASP. NET MVC 开发 模式 的 优势 主要 体现 在 如 下 几 个 
方面 : 

(1) ASP. NET MVC 将 页 面 与 业务 逻辑 进行 分 离 , 可 以 不 在 ASP. NET 进程 中 执行 控 
制 器 ,进而 可 以 快速 地 进行 单元 测试 ,使 测试 变 得 方便 ; 

(2) ASP. NET MVC 限制 了 ViewState 的 使 用 ; 

(3) ASP. NET MVC 使 最 终生 成 的 Html 代码 清洁 化 ,不 会 生成 许多 垃圾 代码 ; 

(4) 客户 端 和 服务 器 端的 处 理 呈 现 速 度 更 快 ; 

(5) ASP. NET MVC 框架 中 没有 PostBack 和 页 面 回 传 事件 机 制 ,表单 的 提交 方式 完 
全 采用 WEB 的 原生 方式 ,传输 的 数据 内 容 也 更 加 合理 ; 

(6) 在 同一 个 项 目 中 ,ASP. NET MVC 开发 模式 可 以 与 WebForm 开发 模式 共存 ,使 各 
类 开发 人 员 各 司 其 职 , 发 挥 特长 ; 

(7) 采用 ASP. NET MVC 开发 模式 进行 软件 项 目 开 发 ,软件 代码 的 复 用 度 将 大 幅度 提 
高 ,项 目 后 期 的 维护 工作 也 将 更 加 快捷 。 

4. ASP.NET MVC 的 劣势 

相对 于 与 WebForm 开发 模式 的 优势 ,ASP. NET MVC 的 劣势 也 是 由 它 的 特性 造成 
的 。MVC 的 特性 就 是 “分 解 关 注 点 ”, 使 每 个 事务 逻辑 都 简单 化 ,而 不 再 像 Web Form 页 面 
一 样 ,可 以 形成 逻辑 复杂 的 Web 页 面 , 它 的 劣势 如 下 所 述 : 

(1) 相对 于 Web Form 开发 模式 ,ASP. NET MVC 对 大 量 且 复杂 数据 的 处 理 变 得 非常 
困难 ,没有 现成 数据 控件 可 以 使 用 ,到 目前 为 止 ,只 能 采用 Lind 技术 或 者 实体 数据 模型 进行 
处 理 ,但 大 面积 地 采用 Linq 和 实体 框架 技术 ,会 使 软件 的 运行 效率 大 幅度 降低 。 软 件 开发 
人 员 往 往 需要 在 软件 的 运行 效率 和 系统 的 开发 进度 之 间 进 行 抉择 ,到 目前 为 止 , 还 没有 出 现 
非常 优秀 的 解决 方案 。 

(2) ASP.NET MVC 开发 模式 不 使 用 视图 状态 维护 状态 信息 ,必须 寻求 其 他 的 解决 方 
案 来 管理 它们 。 传 统 Web Form 开发 模式 中 的 服务 器 控件 ,对 于 MVC 开发 模式 将 不 再 有 
作用 ,需要 软件 开发 人 员 书 写 代 码 实现 ,这 给 中 低级 开发 人 员 增 加 了 相应 的 难度 ,从 而 影响 
项 目的 开发 效率 。 
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(3) 采用 ASP. NET MVC 开发 模式 的 软件 项 目 , 项 目 开 发 周期 相对 于 传统 的 Web 
Form 开发 模式 要 略 长 。 


2.3 源 代 码 的 版 本 控制 


2.3.1 源码 控制 概述 


源 代码 的 版 本 控制 简称 为 源码 控制 , 它 在 协作 开发 环境 中 是 非常 重要 的 , 它 包 含 了 对 应 
用 程序 中 每 个 源 文 件 修改 的 历史 记录 ,可 对 多 个 开发 者 的 行为 进行 协调 。 在 需要 比较 两 种 
版 本 的 文件 或 找 回 早期 版 本 的 文件 时 , 源 代码 的 控制 是 非常 有 用 的 。 

常用 的 源码 控制 软件 有 微软 的 Visual SourceSafe 2005 (VSS 2005)、Visual Studio 
Team Foundation(VSTF) ,Dick Grune 开发 的 CVS(Concurrent Versions System) 开 源 软 
件 和 CollabNet 开发 的 Subversion(SVN) 开 源 软 件 等 。 前 两 者 主要 结合 微软 的 开发 工具 使 
用 ,后 两 者 通常 在 UNIX/Linux 或 Java 开发 工具 中 使 用 。 

VSTF 是 Visual Studio 2005 Team System 中 的 一 个 组 件 , 可 以 使 项 目 参与 者 能 够 将 
工作 项 与 其 他 类 型 的 配置 项 (如 工作 项 、 源 文件 ,更改 集 和 版 本 ) 相 关联 ,从 而 将 源 代 码 控制 、 
工作 项 跟踪 和 版 本 管理 关联 在 一 起 。VSTF 提供 了 一 个 灵活 的 、 集 成 的 工具 集 ,将 Visual 
Studio 的 工作 效率 和 创新 潜力 与 面向 过 程 解决 方案 的 可 预测 性 和 可 再 生产 性 相 结合 ,以 便 
有 效 地 管理 软件 开发 项 目 中 的 更 改 。 在 使 用 VSTF 时 ,通常 的 做 法 是 将 Team Foundation 
Server 安装 在 单独 的 服务 器 上 ,而 VSS 可 与 VS 开发 工具 安装 在 相同 机 器 上 使 用 。 

在 Visual Studio 2005 Team System 以 后 ,就 不 再 发 布 新 版 本 的 VSS, 而 是 集成 了 另外 
一 个 叫做 Team Foundation Server 的 项 目 生命 周期 管理 工具 。VSS 未 来 将 面向 独立 开发 
者 和 小 型 开发 团队 。 

在 VS 2010 中 ,通过 升级 补丁 的 方式 ,VSS 2005 仍 可 与 VS 2010 协同 工作 。 并 且 微 软 
对 VSS 进行 了 扩展 ,以 提供 对 Web 服务 和 Unicode 项 目的 支持 ,从 而 帮助 程序 员 更 加 有 效 
地 应 对 当今 业务 的 挑战 。 开 发 人 员 将 享受 到 改进 的 性 能 以 及 VSS 和 VS 2010 之 间 更 协同 
工作 所 带 来 的 方便 。 本 书 选 择 简单 实用 的 VSS 2005 作为 源码 控制 的 工具 来 讲解 。 


2.3.2 Visual SourceSafe 2005 的 功能 


Visual SourceSafe 2005( 下 称 VSS) 是 一 种 源 代码 控制 系统 , 它 提 供 了 完善 的 版 本 和 配 
置 管理 功能 以 及 安全 保护 和 跟踪 检查 功能 。VSS 通过 将 有 关 项 目 文档 (包括 文本 文件 .图 
像 文件 二进制 文件 .声音 文件 .视频 文件 ) 存 人 数据 库 进 行 项 目 管理 工作 。 用 户 可 以 根据 需 
要 随时 快速 有 效 地 共享 文件 。 文 件 一 旦 被 添加 进 VSS, 它 的 每 次 改动 都 会 被 记录 下 来 ,用 
户 因此 可 以 恢复 文件 的 早期 版 本 ,项 目 组 的 其 他 成 员 也 可 以 看 到 有 关 文 档 的 最 新 版 本 ,并 可 
对 它们 进行 修改 ,VSS 也 同样 会 将 新 的 改动 记录 下 来 。 你 还 会 发 现 ,用 VSS 来 组 织 管理 项 
目 , 使 得 项 目 组 间 的 沟通 与 合作 更 简易 和 直观 。 

VSS 可 以 同 Visual Basic、Visual C++、Visual J 十 十 \Visual InterDev、 Visual FoxPro 
开发 环境 以 及 Microsoft Office 应 用 程序 集成 在 一 起 ,提供 方便 易 用 、 面 向 项 目的 版 本 控制 
功能 。VSS 可 以 处 理由 各 种 开发 语言 .创作 工具 或 应 用 程序 所 创建 的 任何 文件 类 型 。 在 提 
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倡 文件 再 使 用 的 今天 ,用 户 可 以 同时 在 文件 和 项 目 级 进行 工作 。VSS 面向 项 目的 特性 能 更 
有 效 地 管理 工作 组 应 用 程序 开发 工作 中 的 日 常任 务 。 

VSS 能 够 维护 一 个 文件 的 多 个 版 本 ,包括 对 不 同 版 本 之 间 进 行 修改 的 记录 。 版 本 控制 
主要 包括 : 

(1) 组 内 协调 。 确 保 在 任何 时 刻 都 只 有 一 个 开发 团队 成 员 对 某 个 特定 的 文件 进行 修 
改 , 这 样 可 以 防止 文件 更 改 中 被 其 他 成 员 修改 。 当 然 VSS 管理 员 可 以 改变 此 默认 设置 ,以 
允许 对 单个 文件 同时 有 多 个 签 出 (Check out) ,并 且 仍 禁止 对 他 人 的 修改 进行 覆盖 。 

(2) 版 本 跟踪 。 对 老 版 本 的 源 代 码 和 其 他 文件 进行 归档 和 跟踪 ,以 便 可 用 于 Bug 跟踪 
或 其 他 目的 。 

VSS 源码 控制 软件 是 个 典型 的 C/S 结构 应 用 程序 ,需要 在 服务 器 端 和 客户 端 分 别 安 
装 。 也 就 是 需要 为 开发 团队 安装 一 个 VSS 服务 器 ,每 个 开发 成 员 都 需要 安装 VSS 客户 端 
软件 。 下 面 我 们 简要 介绍 安装 VSS 的 过 程 以 及 如 何在 VS 2010 中 使 用 VSS 进行 源码 控 
制 ,假如 开发 团队 处 于 Windows 局 域 网 环境 内 。 


2.3.3 VSS 在 服务 器 端的 安装 和 配置 

1. 在 服务 器 端 安装 VSS 

在 Microsoft Visual SourceSafe 2005 安装 文件 夹 中 ,双击 Visual SourceSafe 2005 安装 
程序 setup. exe, 根 据 Installation Wizard 的 提示 完成 安装 过 程 ,选择 安装 路 径 ,直至 提示 你 
重启 以 使 新 安装 的 程序 生效 。 

2. 创建 共享 文件 夹 

在 服务 器 端 要 先 创 建 一 个 进行 源 代码 管理 的 数据 库 , 以 便 存储 开发 团队 中 需要 进行 控 
制 的 源 代码 。 源 代码 管理 数据 库 实际 上 是 一 个 基于 磁盘 文本 文件 存储 的 数据 库 , 放 在 某 个 
文件 夹 下 。 该 文件 夹 应 该 共享 出 来 被 VSS 客户 端 访 问 。 创 建 共享 网 络 文件 夹 的 过 程 为 : 

(1) 在 VSS 服务 器 端 ,打开 Windows 资源 管理 器 ,在 DD 盘 新 建 一 个 名 为 MyCode 的 文 
件 夹 。 

(2) 右 击 MyCode, 然 后 单 击 “ 属 性 ”。 

(3) 在 “MyCode 属性 ?对 话 框 中 , 单 击 “共享 ”选项 卡 ,共享 名 为 MyCode 保持 不 变 , 然 
后 单 击 “共享 ”, 选 择 要 共享 的 用 户 ,再 单 击 下方 的 “高 级 共享 ”, 在 弹出 的 窗口 中 输入 共享 名 
Mycode, 再 单 击 *“ 权 限 ”, 选 中 读 取 和 更 改 权限 ,实现 共享 此 文件 夹 。 该 共享 的 D:\MyCode 
文件 夹 就 将 用 来 存放 开发 团队 中 需要 进行 控制 的 源 代码 了 ,也 即 源 代码 管理 数据 库 将 放 在 
此 文件 夹 中 。 

3. 创建 源 代码 管理 数据 库 

(1) 在 服务 器 端 ,打开 “开始 ”菜单 ,选择 “程序 ”| Microsoft Visual SourceSafe | Visual 
SourceSafe Administration ,出 现 Visual SourceSafe Login 对 话 框 ,如 图 2-28 所 示 。 在 安装 
VSS 服务 端 后 ,VSS 自动 建 了 Admin 登录 账号 (无 密码 ) 和 Common 数据 库 。 单 击 OK 按 
钮 ,进入 VSS 数据 库 登录 账号 管理 界面 ,如 图 2-29 所 示 。 

(2) 在 图 2-29 所 示 Visual SourceSafe Administrator 对 话 框 的 File 菜单 中 ,选择 New 
Database。 
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Log On to Visual SourceSafe Database 


Visual SourceSafe2005 


2-28 VSS 登录 对 话 框 


(3) 在 Location 框 中 输入 “\\VSS 服务 器 名 称 \MyCode”, 例 如 输入 \\ WclNote\ 
MyCode, 其 中 WclNote 为 VSS 服务 器 名 称 ,也 可 通过 浏览 找到 共享 文件 夹 MyCode。 单 击 
OK 按钮 后 将 自动 创建 源 代码 管理 数据 库 MyCode。 进 入 该 文件 夹 可 以 看 到 有 Users、 
Temp、Data 共 3 个 文件 夹 和 srcsafe. ini、users. txt 两 个 文件 。 

(4) 下 面 需 要 打开 这 个 数据 库 , 进 行 访问 用 户 的 账号 设置 。 在 图 2-30 中 选择 File 菜单 
下 的 Open SourceSafe Database, 出 现 Open SourceSafe Database 对 话 框 ,新 建 数据 库 的 名 
称 和 路 径 会 出 现在 Open SourceSafe Database 对 话 框 的 列表 框 中 ,双击 之 ,在 随后 的 对 话 框 
中 单 击 OK 按钮 ,会 出 现 一 个 提示 信息 框 ,意思 是 给 MyCode 数据 库 建 了 一 个 Admin 管理 
账号 ,密码 为 空 ,出 于 安全 考虑 ,应 更 改 管理 账号 Admin 的 登录 密码 。 也 可 单 击 Add 按钮 ， 
选择 “下 一 步 ”, 在 需要 指定 Location 的 时 候 输入 “\VSS 服务 器 名 称 \Mycode”, 或 者 直接 通 
过 Browse 搜索 局 域 网 中 服务 器 共享 的 VSS 目录 文件 ,打开 文件 夹 , 选 中 srcsafe. ini 配置 文 
件 即 可 。 单 击 OK 按钮 后 ,将 出 现 和 图 2-29 相似 的 MyCode 数据 库 登录 账号 管理 界面 。 


图 2-29 VSS 数据 库 登 录 账号 管理 界面 图 2-30 MyCode 数据 库 登 录 账 号 管理 界面 


(5) 根据 开发 团队 中 成 员 分 工 情况 ,为 开发 团队 中 的 每 个 人 员 都 分 配 一 个 VSS 服务 器 
的 用 户 账 号 ,以 后 打开 MyCode 这 个 数据 库 时 都 需要 进行 身份 认证 。 

添加 用 户 的 方法 是 选择 如 图 2-30 中 Users | Add User 菜单 ,输入 用 户 名 和 密码 ,例如 
建立 用 户 wcl, 密 码 也 为 wcl。 建 立 的 账号 对 源 代码 数据 库 只 有 两 种 操作 权限 ,要 么 只 读 要 
么 读 写 。 设 置 wcl 账号 具有 读 写 权 限 。 为 安全 起 见 , 需 更 改 Admin 的 登录 密码 。 先 在 列表 
框 中 选中 Admin 账号 ,选择 Users | Change Password 菜单 ,而 后 可 完成 密码 的 修改 操作 。 
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至 此 VSS 服务 器 端的 MyCode 数据 库 已 设置 完毕 。 


2.3.4 VSS 在 客户 端的 安装 和 配置 

1. 在 客户 端 安装 VSS 

在 VSS 服务 器 上 ,VSS 2005 的 默认 安装 文件 夹 是 “C:\Program Files\ Microsoft 
Visual Studio\Common\VSS”, 将 此 文件 夹 设置 成 共享 文件 夹 。 开 发 成 员 即 可 通过 网 上 邻 
居 来 访问 此 共享 文件 夹 。 在 该 共享 文件 夹 中 找到 Setup. exe 程序 ,双击 运行 它 ,进入 VSS 
客户 端的 安装 ,在 提示 框 中 输入 用 户 名 和 工作 机 构 名 称 ,选择 VSS 在 客户 端的 安装 路 径 后 ， 
单 击 安装 图 标 ,进入 实际 安装 步骤 ,以 后 的 工作 将 由 系统 自动 完成 。 

2. 如 何 将 源 程序 添加 到 VSS 中 进行 代码 管理 

(1) 在 VS 2010 中 使 用 VSS 2005 需要 安装 更 新 补丁 VSS integration with VS 2010， 
下 载 安装 后 ,进入 VS 2010 并 打开 项 目 文件 ( 源 程 序 ) ,选择 “工具 ”|“ 选 项 源 代码 管理 ” 菜 
单 , 出 现 如 图 2-31 所 示 对 话 框 。 在 “当前 源 代码 管理 插件 ?下 拉 列 表 框 中 选择 源 代 码 管理 插 
件 Microsoft Visual SourceSafe, 然 后 就 可 在 图 2-32 中 进行 源 代码 管理 环境 设置 了 。 


4 源 代码 管理 措 定 用 于 Microsof Visual Studio 的 源 代码 管理 插件 ， 并 允许 对 特定 于 播 件 的 选 
项 并 行 更 改 . 


”调试 Microsoft Visual SourceSafe | 
b IntelliTrace 


b 性 能 工具 
”HTML 设计 器 


» Office 工具 
Python Tools 
Windows 窗 体 设计 器 
» Workflow Designer 

， 测试 工具 

” 数 掺 库 工具 

”文本 模板 化 


图 2-31 “选项 ”属性 对 话 框 


将 源 代码 放 到 VSS 数据 库 中 进行 管理 ,此 过 程 称 为 “ 签 入 ”(Check-in); 从 VSS 数据 库 
中 调 出 源 代码 进行 修改 ,此 过 程 称 为 “ 签 出 "(Check-out)。 
文件 从 VSS 中 签 出 后 显示 在 VS 2010 文本 编辑 器 中 ,此 时 并 没有 放 到 本 地 工作 目录 
中 ,只 有 在 存盘 后 才 会 存放 到 本 地 工作 目录 。 同 理 将 文件 签 入 到 VSS 中 ,并 没有 从 本 地 工 
作 目 录 中 读 取 文件 ,而 是 将 文本 编辑 器 中 的 文件 内 容 放 到 VSS 中 。 

将 “解决 方案 ”通过 VSS 管理 的 最 大 好 处 就 是 若 团队 成 员 中 某 个 人 A 签 出 了 一 个 文件 
F 进行 修改 ,其 他 成 员 B.C.D 在 各 自 的 计算 机 上 对 文件 F 就 只 能 查看 ,而 不 能 修改 。 当 A 
将 文件 下 签 和 后, 如果 B 对 VSS 数据 库 有 读 写 权限 , 则 B 可 以 签 出 文件 F 对 之 进行 修改 ， 
而 成 员 A、C、D 只 能 在 各 自 的 计算 机 上 查看 ,不 能 修改 。 
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环境 源 代 到 管理 环境 设置 (O): 
ee Sourceste 
4 源 代码 管 理 
播 件 选择 回 奋 J 开 解 夫 方 安 或 项 目 时 葡 取 所 有 内 容 (G) 
环境 回 关闭 解 志 方 室友 项 目 时 符 入 所 有 内容 中 
ds 回答 出 顶 时 不 显示 “ 签 测 ”对 活 框 (S) 
| 这 回答 入 项 时 不 旦 示 “ 答 入 ” 对 活 框 (N) 
IntelliTrace 回答 入 时 使 项 保持 笠 出 状态 (O) 
答 入 项 行为 
og ens 后 
office 工具 
enet am 
Windows 窗 体 设计 器 器 
| | » Workow Designer se 
测试 工具 
| | ， wos 二 如 果 已 经 使 用 了 “不 再 显示 此 对 活 框 ” 降 车 对 活 枉 , 请 本 
文本 模板 化 单 击 “ 重 于 ”以 再 次 查看 它们 . 
Cm J ww | 


图 2-32 “环境 ”属性 对 话 框 


对 于 单个 开发 人 员 ,也 称 “ 独 立 开 发 人 员 ”, 在 从 VSS 中 签 出 或 签 人 源 代 码 时 ,可 以 让 
VSS 不 出 现 询 问 对 话 框 ,以 便 加 快 操作 速度 。“ 打 开 解 决 方案 或 项 目 时 获取 所 有 内 容 ” 表 示 
在 VS 2010 中 , 当 打 开 解 决 方案 或 项 目 时 将 VSS 服务 器 中 的 所 有 最 新 源 代码 从 数据 库 中 取 
出 全 部 放 到 本 地 计算 机 上 .。“ 关 闭 解决 方案 或 项 目 时 签 人 所 有 的 内 容 ” 表 示 VS 2010 关闭 
解决 方案 或 项 目 时 ,可 将 所 有 内 容 自 动 放 到 VSS 服务 端的 数据 库 中 。 

(2) 当选 定 前 述 源 代 码 管理 插件 VSS 后 ,就 会 在 VS 2010 的 “文件 ”菜单 中 出 现 “ 源 代 
码 管理 " 子 菜单 ,如 图 2-33 所 示 。 单 击 选择 “将 解决 方案 添加 到 源 代码 管理 ”, 出 现 Visual 
SourceSafe Login 登录 窗口 ,输入 前 面 建立 的 用 户 名 “wcl” 和 密码 “wcl” ,数据 库 输入 或 选择 

文件 (由 


新 建 (V) » I Debug -3 selectUsersGroupInfc 
#7O) "同名 ere 

沃 j0D) » 

关闭 (@) 

关闭 解决 方案 中 

保 仓 DAsoftwaresch\ (9) Cul+s 

将 先 定 项 另存 为 (入 

@ RO Ctrl+Shift+s 


和 


源 代 玛 曾 理 (R) ， | 将 和 沁 方 守法 0 到 源 代 码 管理 (9 
失 向 汪 代 玛 疙 再 和 0 网 站 (入) 
方式 ~ 于 ”更 改 源 代码 各 理 (O)- 

过 ”启动 Microsoft Visual SourceSafe(N) 


图 2-33 “ 源 代码 管理 ? 子 菜 单 
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“\\wclnote\mycode\”, 单 击 OK 按钮 ,出 现 图 2-34 所 示 的 Add to SourceSafe( 将 VS 2010 
解决 方案 添加 到 VSS 管理 ) 对 话 框 , 单 击 OK 按钮 后 , 则 整个 解决 方案 将 由 VSS 管理 。 


Add to SourceSafe 


2-34 将 VS 2010 解决 方案 添加 到 VSS 管理 


(3) 此 时 以 “解决 方案 资源 管理 器 ”窗口 中 可 以 看 到 ,参与 管理 的 所 有 文件 将 呈现 “加 
锁 ” 状 态 , 表 示 这 些 文件 现在 不 能 对 它 直接 修改 。 若 要 编辑 某 个 文件 ,鼠标 右 击 此 文件 ,出 现 
2-35 所 示 编 辑 修 改 前 的 快捷 菜单 ,选择 “ 签 出 以 进行 编辑 ”; 如 果 要 将 本 地 的 某 个 文件 和 
VSS 数据 库 中 的 最 新 文件 进行 比较 , 则 选择 “比较 ”; 如 要 将 VSS 数据 库 中 的 文件 取出 来 覆 
盖 本 地 工作 目录 中 的 文件 , 则 选择 “获取 ” 如 要 查看 某 个 文件 的 版 本 情况 , 则 选择 “查看 历 
史记 录 ”。 


和 加 方 总 CQUWEBSMS” 0 个 项 目 ) 
CommonMiechod 


2-35 “加 锁 ” 状 态 、 文 件 编辑 修改 前 快捷 菜单 及 文件 编辑 修改 后 快捷 菜单 


| 59 
第 2 章 ”Web 开发 环境 的 建国 


当 修改 了 某 个 文件 存盘 后 ,用 鼠标 右 击 此 文件 ,可 以 看 到 快捷 菜单 已 更 换 , 见 图 2-35 右 
侧 部 分 。 如 要 将 此 文件 放 到 VSS 数据 库 中 时 ,选择 * 签 入 ”; 如 果 要 让 该 文件 自 签 出 后 的 修 
改 无 效 ,选择 “撤销 签 出 ,此 时 VSS 数据 库 中 的 版 本 将 覆盖 本 地 已 经 修改 的 文件 。 选 择 “ 查 
看 挂 起 的 签 人 ” 则 出 现 * 挂 起 的 签 人 ”窗口 ,可 以 查看 你 的 所 有 已 经 签 出 的 文件 列表 ,方便 你 
的 使 用 。 菜 单 中 “获取 最 新 版 本 (递归 )” 可 将 当前 选中 的 文件 夹 下 的 所 有 文件 从 VSS 中 “ 获 
取 ” 到 本 地 。 如 果 选 择 , 则 VSS 中 所 有 最 新 的 文件 将 存放 到 本 地 。 

(4) 当 不 需要 VSS 管理 时 ,可 按 如 下 步骤 撤销 VSS 管理 。 首 先 打 开 “ 文 件 ” 菜 单 下 的 
“ 源 代码 管理 ”1 “更改 源 代码 管理 ” 子 菜单 , 见 图 2-33。 

然后 ,在 如 图 2-36 所 示 对 话 框 中 单 击 * 取 消 绑 定 ? 按 钮 即 可 。 


Eee 2 
Ee 可 Re) | 人 | 区 | 
和 于 硕 上 机 天 和 遇 W 二 | 


El 
We my 


图 2-36 “取消 绑 定 ? 对 话 框 


若 要 某 解决 方案 或 项 目 彻 底 摆脱 VSS 的 管理 ,可 先 通过 “获取 最 新 版 本 (递归 ) "将 VSS 
中 的 所 有 文件 覆盖 到 本 地 工作 目录 中 ,然后 删除 本 地 工作 目录 中 的 所 有 扩展 名 为 SCC 的 文 
件 , 最 后 将 VSS 服务 端 中 存放 数据 库 的 文件 夹 改 名 。 此 时 再 次 打开 此 解决 方案 或 项 目 , 就 
会 出 现 图 2-37 所 示 对 话 框 , 单 击 Cancel 后 ,在 随后 出 现 的 对 话 框 中 选择 “永久 移 除 源 代码 
管理 的 关联 绑 定 ? 即 可 达到 目的 。 


Log On to visual SourceSafe Database x 


Visual SourceSafe 0 


Provide your credentials to access this database- 


Visual SourceSafe credentials may be different than your 
Windows network user name and password 


YUser name: |Adnin 
SourceSafe password: 
Datsbase: code Browse... | 


Cael | Hap | 


图 2-37 VSS Login 对 话 框 


60 
开发 技术 (第 2 版 ) 


3. 客户 端 获取 服务 器 端的 源 代码 

假如 团队 开发 中 成 员 A 已 经 通过 VSS 管理 其 解决 方案 或 项 目 源 代码 ,成 员 B 想 加 入 
进来 进行 合作 开发 ,那么 成 员 B 如 何在 另 一 台 计 算 机 上 用 VS 2010 打开 成 员 A 的 源 代码 
呢 ? 下 面 就 来 介绍 客户 端 获取 服务 器 端 源 代码 的 过 程 。 

1) 在 客户 端 直接 用 VSS 2005 获取 服务 器 端的 源 代码 

(1) 在 成 员 B 的 计算 机 上 安装 VSS 客户 端 后 ,在 开始 菜单 中 选择 “程序 (P)”| 
Microsoft Visual SourceSafe | Microsoft Visual SourceSafe, 出 现 如 图 2-37 所 示 界 面 。 

(2) 在 图 2-37 的 对 话 框 中 输入 VSS 管理 账号 Admin 和 密码 ,在 Database 处 可 单 击 
Browse 按钮 选择 VSS 数据 库 MyCode, 单 击 OK 按钮 后 进入 如 图 2-38 所 示 的 界面 。 


Fle Edit View Versions Tools Web Help 
CA EA MA "I A dA 


Working Folder: DAMyCode 
DateTine Check Out Folder 


图 2-38 VSS Explorer 


(3) 在 图 2-38 中 ,用 鼠标 右 击 *$ /”, 在 出 现 的 快捷 菜单 中 选择 Set Working Folder, 即 
设置 存放 解决 方案 或 项 目 源 代码 的 本 地 工作 文件 来。 在 出 现 的 对 话 框 中 可 直接 输入 本 地 工 
作 目 录 名 称 , 不 妨 设 定 工作 目录 为 “D:\MyAppCode”, 单 击 OK 按钮 退出 工作 目录 设 定 对 话 
框 。 然 后 再 次 用 鼠标 右 击 “$ /”, 在 出 现 的 快捷 菜单 中 选择 Get The Latest Version ,出 现 
图 2-39 所 示 Get Multiple 对 话 框 。 选 择 Recursive, 递 归 获 取 各 文件 夹 中 的 文件 ,然后 单 击 
OK 按钮 ,此 时 VSS 服务 端 数 据 库 中 的 所 有 源 程序 都 放 到 文件 夹 “D:\MyAppCode” 中 。 


Get Multiple Ded 
2 i 
园 Becursive 回 puild tree (override working folders) Eenesl. 

闻 Make writable Mel 
lp 
omy shov this dislog when the Shift key is down 
havaneed 2 


图 2-39 Get Multiple 对 话 框 


(4) 在 VS 2010 中 打开 项 目 对 话 框 ,在 文件 名 处 输入 *D:\MyAppCode”, 然 后 一 直 找 到 
Projects 子 文件 夹 , 再 在 其 下 面 找到 扩展 名 为 “sln” 的 文件 ,打开 它 即 完成 了 成 员 B 从 VSS 
数据 库 获 取 源 代码 的 过 程 。 
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2) 直接 在 VS 2010 中 获取 服务 器 端 源 代码 


在 需要 获取 源 代码 的 机 器 上 启动 VS 2010, 在 “起 始 页 ”中 选择 打开 “网 站 ”, 在 弹出 的 对 
话 框 中 选择 * 源 代码 管理 ?选项 ,也 会 出 现 如 图 2-37 所 示 VSS Login 对 话 框 ,登录 后 出 现 如 
图 2-40 所 示 对 话 框 ,在 Create a New Project in 处 输入 *D:\MyAppCode”, 作 为 存放 源 代码 
的 目录 , 单 击 OK 按钮 , 则 源 代码 自动 从 VSS 服务 器 存放 到 本 地 ,并 在 VSS 2005 中 会 打开 
对 应 的 项 目 。 


Create local project from SourceSafe 2s>:>> 


Create a new project in the 


[Bronse, 


SourceSafe project to dornload: 


I | [mm 


2-40 ”获取 源 代码 对 话 框 


2.4 如 何 进行 Web 应 用 系统 的 发 布 


当 一 个 Web 应 用 系统 开发 完成 后 ,需要 部 署 到 服务 器 上 ,让 最 终 用 户 通过 浏览 器 进行 
操作 ,因此 必须 先 将 该 Web 应 用 系统 进行 发 布 ,也 称 Web 应 用 系统 的 部 署 。 发 布 Web 应 
用 系统 主要 有 3 种 方法 : 

(1) 手工 发 布 。 

(2) 直接 连接 到 远程 服务 器 上 ,通过 HTTP 或 者 FTP 协议 进行 发 布 。 

(3) 打包 发 布 。 

手工 发 布 非常 灵活 ,但 对 发 布 人 员 有 一 定 要 求 ; 第 二 种 方法 操作 简单 ,可 以 覆盖 所 有 网 
页 或 只 发 布 更 改 后 的 网 页 ,但 需要 联机 操作 。 手 工 发 布 和 打包 发 布 属于 脱 机 发 布 。 打 包 发 
布 属于 傻瓜 型 发 布 ,发 布 过 程 非常 简单 ,安装 一 下 即 可 。 

在 将 整个 ASP. NET 站 点 提供 给 用 户 之 前 ,可 以 预 编 译 该 站 点 。 未 经 预 编译 的 站 点 发 
布 后 ,在 用 户 首次 请 求 资源 (如 网 站 的 一 个 页 ) 时 ,也 会 动态 编译 ASP. NET 网 页 和 代码 文 
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件 ,在 第 一 次 编译 页 和 代码 文件 之 后 ,会 缓存 编译 后 的 资源 ,这 样 将 大 大 提高 随后 对 同一 页 
的 页 面 请 求 效率 。 对 于 预 编译 后 的 站 点 ,页 和 代码 文件 在 第 一 次 被 请 求 时 无 须 编译 。 对 站 
点 预 编译 可 以 在 预 编译 时 发 现 Web 应 用 系统 中 的 bug, 还 可 避免 部 署 源 代码 ,提高 站 点 的 
运行 性 能 ,加 快 用 户 的 响应 时 间 。 这 对 于 经 常 更 新 的 大 型 站 点 尤为 有 用 。 

下 面 介绍 一 下 在 VS 2010 中 的 3 种 Web 发 布 方式 。 


2.4.1 Web 应 用 系统 的 手工 发 布 


Web 应 用 系统 的 手工 发 布 是 利用 VS 2010“ 生 成 ”菜单 中 的 “发 布 网 站 ”命令 和 前 面 提 到 
的 IIS 的 有 关 配 置 来 完成 的 。 
Web 应 用 系统 的 手工 发 布 步骤 如 下 : 
(1) 在 VS 2010 中 打开 开发 的 Web 项 目 。 
(2) 单 击 “ 生 成 "菜单 中 的 “发 布 网 站 ”命令 ,弹出 如 图 2-41 所 示 的 “发 布 网 站 ”对 话 框 。 
E EE 
目标 位 置 (L): (fpV/… http://-. 或 drive:\path) 
CNDocuments and Settings\Administrator\My Documents\ 解 决 方 罕 图 
园 允许 更 新 此 预 编 译 站 点 (A) 
回 使 用 国定 命名 和 单 页 程序 集 (月 
回 发 出 油 试 信息 (G) 
回 对 预 病 译 程序 集 启 用 强 命名 (S) 


回 使 用 由 强 名 称 工具 生成 的 密 铀 文件 (U) 
密 钥 文件 位 置 : 


口 适 R 签 名 (D) 


使 用 富 外 容 强 () 
窗 诅 富里: | 


口 用 AllowPartiallyTrustedCallerAttribute (APTCAJ 标 记 程序 集 (M) 


CCsa| 


2-41 “发 布 网 站 ”对 话 框 


在 “目标 位 置 ” 处 输入 站 点 编译 后 的 存放 位 置 ,假设 为 *c:\MyWebsite”, 选 择 “ 允 许 更 新 
此 预 编 译 站 点 " 复 选 框 ,指定 将 所 有 程序 代码 编译 为 程序 集 ,htm、aspx 等 页 面 文件 将 按 原样 
复制 到 目标 文件 夹 。 如 果 不 选择 此 项 , 则 在 发 布 的 网 站 中 aspx 文件 也 将 编译 ,但 将 无 法 看 
到 aspx 源 代码 。 单 击 “ 确 定 ” 按 钮 后 ,系统 自动 编译 站 点 。 

(3) 将 *C:NMyWebsite" 中 的 内 容 复 制 到 IIS 服务 器 中 的 某 个 目录 下 ,假设 为 *“D:\ 工 资 管 
理 系统 ”。 然 后 进入 “控制 面板 ”1“ 管 理工 具 ”, 运 行 “Internet 信息 服务 ,进入 IIS 服务 管理 器 。 

(4) 在 打开 的 IIS 管理 器 中 选择 “新 建 网 站 ”菜单 ,如 图 2-42 所 示 。 网 站 名 称 可 输入 
“工资 管理 系统 ”, 选 择 IP 地 址 ,保持 TCP 端口 不 变 , 输 入 网 站 的 主机 头 名 即 域名 (如 果 没 
有 ,可 以 不 输 ) ,网 站 物理 路 径 输 为 “D:\ 工 资 管理 系统 ”。 单 击 “ 确 定 ” 后 网 站 创建 成 功 ,用 户 
就 可 以 在 浏览 器 URL 地 址 栏 输 入 “http://IP 地 址 ?或 域名 访问 网 站 了 。 另 外 也 可 将 需 手 
工 发 布 的 网 站 创建 为 虚拟 目录 来 发 布 。 
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2-42 ”新建 网 站 


2.4.2 Web 应 用 系统 的 联机 发 布 


Web 应 用 系统 的 联机 发 布 过 程 如 下 : 
(1) 在 图 2-41" 发 布 网 站 ”对 话 框 中 的 “目标 位 置 " 输 入 项 右 侧 单 击 小 按钮 ,出 现 如 图 2-43 
所 示 对 话 框 。 


http#//202.202.0.11/| 


2-43 “发 布 网 站 ”对 话 框 
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(2) 在 图 2-43 中 ,选择 “FTP 站 点 ”可 以 按照 FTP 方式 进行 站 点 发 布 ; 选择 “远程 站 点 ” 
则 按照 HTTP 方式 进行 站 点 发 布 。“ 本 地 IIS” 实 际 上 也 是 按照 HTTP 方式 进行 站 点 发 布 ， 
只 不 过 无 须 远 程 连接 。“ 文 件 系 统 ” 即 是 前 面 介绍 的 手工 发 布 方 式 。 

(3) 对 于 以 “远程 站 点 ”方式 发 布 网 站 ,前 提 条 件 是 在 IIS 服务 器 上 安装 FrontPage 服务 
器 扩展 。 单 击 “ 远 程 站 点 ”后 输入 实际 网 站 位 置 。 对 于 “FTP 站 点 ?发 布 方式 ,需要 输入 FTP 
服务 器 的 IP 地 址 和 网 站 存放 路 径 。 

(4) 设置 完成 后 , 单 击 图 2-41 中 “确定 ”按钮 ,系统 自动 编译 站 点 ,并 且 将 网 站 发 送 到 指 
定位 置 。 


2.4.3 Web 应 用 系统 的 打包 发 布 


所 谓 Web 应 用 系统 的 打包 发 布 ,是 指 Web 应 用 系统 开发 完成 后 ,将 它 做 成 一 个 安装 程 
序 , 以 方便 部 署 。 在 VS 2010 中 制作 Web 应 用 系统 安装 程序 的 步骤 如 下 。 

(1) 首先 在 VS 2010 中 打开 需要 制作 安装 程序 的 已 经 完成 的 Web 项 目 。 

(2) 在 “文件 "菜单 上 选择 “添加 ”| “新建 项 目 ” 菜 单 , 如 图 2-44 所 示 。 


保存 Cv-\WebSitez\ (S) Carl+S 现 有 网 站 (B)… | 
将 丢 定 项 另存 为 (A)… 


加 包 . 


此 
bE | 
局 
昌 
5 


3 打 和 内- CltpP 


图 2-44 添加 “新 建 项 目 ” 


(3) 在 如 图 2-45 所 示 “ 添 加 新 项 目 ” 对 话 框 中 选择 “其 他 项 目 类 型 "中 的 “安装 和 部 署 ”， 
在 右边 列表 框 中 选择 Web 安装 项 目 ”, 输 入 安装 项 目 名 称 和 安装 程序 的 存放 地 址 后 单 击 
“确定 ”按钮 。 不 妨 将 项 目 名 称 输 为 myWebSetup。 

(4) 在 “解决 方案 资源 管理 器 ”中 选择 myWebSetup 项 目 , 单 击 打开 属性 窗口 ,输入 “ 输 
出 文件 名 ”, 如 图 2-46 所 示 。 单 击 “ 系 统 必 备 ”按钮 可 选择 系统 运行 所 必 备 的 组 件 , 包 括 . Net 
Framework 3.5 等 。 

(5) 在 “解决 方案 资源 管理 器 ”中 选择 myWebSetup 项 目 , 右 击 它 ,在 弹出 的 快捷 菜单 中 
选择 “添加 ”, 然 后 选择 “项 目 输出 ”, 出 现 “ 添 加 项 目 输出 组 ”对 话 框 ,如 图 2-47 所 示 。 选 择 需 
要 生成 安装 程序 的 项 目 后 , 单 击 “ 确 定 ” 按 钮 。 
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4 Visual ce 
Windows 
Web 


Cloud 


InstallShield LE 
Visual Studio Installer 


2-45 “添加 新 项 目 ” 对 话 框 


ee I es 
MEE(CO: [S(Oebug) 2 二 Sm) | 不 用 | [essemo). | 
4 本 村 必 性 
pe 输出 文件 名 (N: 和 =bugwmywebseup.msi ~ 
包 文件 (G}: 和 文件 中 M 
| ES): 优化 要 M4 
CAB 文件 大 小 (四: © TRYU) 
自 定 义 (M): 
| | Kb 
安装 URLO: 
| 
| -|e le 


图 2-46 “属性 ”窗口 


(6) 在 “解决 方案 资源 管理 器 ”中 选择 myWebSetup 项 目 , 右 击 它 , 在 弹出 的 快捷 菜单 中 
选择 “视图 ”, 然 后 选择 用户 界面 ”, 就 会 出 现 “ 用 户 界 面 " 树 型 菜单 ,如 图 2-48 所 示 。 用 鼠标 
单 击 树 型 菜单 各 项 ,进行 属性 设置 ( 若 没 有 出 现 属性 窗口 , 则 按 下 F4 功能 键 )。 例 如 “欢迎 
使 用 ”中 可 指定 安装 程序 的 背景 图 片 .版 权 警告 文 本 和 欢迎 文本 。 


66 
开发 技术 (第 2 版 ) 


画 生成 U) 
重新 生成 (E) 
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图 2-47 “项 目 输出 ”菜单 和 “添加 项 目 输出 组 ”对 话 框 
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图 2-48 设置 安装 程序 “用 户 界面 ” 


(7) 设置 Web 安装 项 目的 虚拟 目录 等 重要 属性 。ASP. NET 打包 项 目 中 可 以 设置 虚拟 
目录 、 默 认 首 页 等 属性 ,方法 是 选择 图 2-48 中 的 “视图 ”1“ 文 件 系统 ”菜单 后 ,选择 “Web 应 用 
程序 文件 夹 ”, 然后 按 下 F4 功能 键 ,在 属性 窗口 中 设 定 相 应 的 VirtualDirectory 和 
DefaultDocument 属性 。ASP. NET 安装 项 目 还 提供 “注册 表 ” 等 设置 ,可 以 在 安装 过 程 中 
自动 添加 注册 表 键 名 和 键 值 ,方法 是 选择 图 2-48 中 的 “视图 ”| “注册 表 ”菜单 ,然后 右 击 相应 
注册 表 分 支 后 选择 “新 建 键 ”, 并 在 属性 窗口 输入 相关 键 值 等 。 

(8) 在 “解决 方案 资源 管理 器 "中 选择 “myWebSetup” 项 目 , 右 击 它 ,在 弹出 的 快捷 菜单 
中 选择 “生成 ”或 者 “重新 生成 ”, 生 成 安装 文件 。 生 成 完成 后 .在 第 (4) 步 所 指定 的 路 径 下 , 即 
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可 发 现 有 一 个 setup. exe 和 一 个 myWebSetup. msi 文件 。 


(9) 将 这 两 个 安装 文件 复制 到 需要 部 署 Web 应 用 的 服务 器 上 ,双击 setup. exe 文件 , 即 
可 进行 自动 安装 和 配置 。 安 装 程序 会 将 Web 应 用 系统 默认 放 在 “C:\Inetpub\wwwroot” 文 
件 夹 下 ,也 可 放 在 你 指定 的 其 他 地 方 ,可 在 IIS 中 进一步 对 之 进行 配置 。 

对 于 用 其 他 开发 工具 开发 的 网 站 也 可 利用 VS 2010 进行 打包 发 布 。 在 启动 VS 2010 
后 ,选择 创建 一 个 Web 安装 项 目 ,然后 通过 右 击 “Web 应 用 程序 文件 夹 ”, 添 加 “Web 文件 
夹 " 和 “文件 ”, 将 网 站 的 所 有 文件 包括 进来 ,执行 和 上 面 步 怠 相同 的 属性 设 定 后 , 即 可 生成 安 
装 程序 。 


上 机 实践 题 


1. 熟悉 IIS Web 服务 器 配置 过 程 。 

2. 熟悉 Visual Studio 2010 开发 环境 。 

3. 在 VS 2010 环境 下 配置 源 代码 控制 软件 VSS 2005 。 

4. 新 建 一 个 空 网 站 ,并 通过 代码 控制 软件 管理 ,熟悉 VSS 2005 的 常用 功能 。 
5. 新 建 一 个 空 网 站 , 试 着 用 3 种 方式 发 布 网 站 。 


第 3 章 HTML 基础 与 CSS 


学 习 要 点 

(1) 了 解 HTML 文档 的 基本 结构 。 

(2) 掌握 HTMEL 文档 的 各 种 常用 标记 。 

(3) 熟练 使 用 各 种 HTML 控件 标记 以 及 帧 标记 、 浮 动 帧 标记 。 

(4) 了 解 HTML 5 基础 知识 。 

(5) 了 解 CSS 的 特点 。 

(6) 掌握 CSS 中 各 种 选择 符 的 定义 及 其 使 用 方法 。 

(7) 掌握 CSS 样式 常用 的 属性 例如 字体 属性 、 颜 色 和 背景 属性 文本 属 
性 .边框 属性 等 。 

(8) 掌握 在 HTML 中 使 用 CSS 的 几 种 方式 。 

(9) 了 解 CSS 中 各 种 滤 镜 的 定义 及 显示 效果 。 


1989 年 ,在 瑞士 日 内 瓦 CERN 实验 室 主任 Tim Berners-Lee 的 带领 下 开 
始 实 施 的 信息 全 球 网 ,其 目的 在 于 设计 和 开发 出 一 系列 的 概念 ,通信 协议 和 
系统 ,以 支持 各 种 类 型 信息 之 间 的 相互 链接 。 其 中 发 布 了 基于 超 文 本 和 超 媒 
体 技术 的 HTML 语言 ,该 语言 属于 1986 年 发 布 的 一 个 信息 管理 方面 的 国际 
标准 SGML 的 子 集 。 

这 种 语言 由 于 在 NCSA 的 Mosaic 浏览 器 中 使 用 而 广 为 流 传 。 在 20 世 
纪 90 年 代 , 由 于 互联 网 的 迅速 兴起 ,HTML 空前 繁荣 。 但 在 当时 ,HTML 被 
发 展 成 为 了 许多 不 同 的 版 本 。 只 有 那些 网 页 设计 者 和 用 户 都 共有 的 HTML 
语言 部 分 才 可 以 被 正确 浏览 。 出 于 终结 这 种 混乱 局 面 的 考虑 ,合作 制定 一 个 
公认 的 HTML 语言 规范 成 为 当务之急 。1995 年 11 月 , IETF (Internet 
Engineering Task Force, 互 联网 工程 任务 组 ) 在 对 1994 年 的 常用 实践 进行 编 
纂 整理 的 基础 上 ,倡导 开发 了 HTML 2. 0 规范 。 同 时 , W3C 组 织 提出 的 
HTML 十 和 HTML 3.0 为 HTML 提供 了 更 为 丰富 的 内 容 。 这 些 HTML 规 
范 的 可 贵 之 处 在 于 它们 并 不 在 意 这 些 标准 的 讨论 从 未 取得 过 一 致 , 而 是 致力 
于 吸收 接纳 广泛 的 新 特性 。1996 年 W3C 组 织 的 HTML Working Group 开 
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始 编 纂 新 的 规范 ,并 于 1997 年 1 月 推出 了 HTML 3.2, 并 在 其 中 作 了 许多 重要 的 改动 。 

许多 人 同意 的 一 种 观点 就 是 HTML 文档 应 该 在 不 同 的 浏览 器 和 操作 平台 之 间 都 表现 
良好 。 人 们 希望 只 设计 一 种 文档 的 版 本 ,使 其 可 以 被 所 有 的 人 看 懂 。 如 果 不 是 这 样 ,网 络 这 
个 无 国界 的 空间 就 会 成 为 一 个 混乱 不 堪 的 地 方 ,对 于 所 有 人 来 说 都 需要 一 个 统一 的 标准 。 
1998 年 4 月 24 日 W3C 组 织 发 布 了 HTML 4.0 版 本 ,将 原来 HTML 3. 2 扩展 到 了 一 些 全 
新 的 领域 ,例如 样式 表单 .Script 语言 、 框 架 结 构 . 内 嵌 对 象 . 丰 富 的 表格 以 及 增强 的 表单 功 
能 、 支 持 从 右 到 左 的 文本 等 。 

HTML 5 是 HTML 下 一 个 主要 的 修订 版 本 ,现在 仍 处 于 发 展 阶段 。 其 目标 是 取代 
1999 年 所 制定 的 HTML 4.01 和 XHTML 1.0 标准 ,以 期 在 互联 网 应 用 迅速 发 展 的 时 候 ， 
使 网 络 标准 达到 符合 当代 的 网 络 需求 (现在 大 部 分 浏览 器 已 经 支持 某 些 HTML 5 技术 ) 。 

学 习 Web 开发 技术 ,必须 首先 熟悉 HTML 的 常用 标记 ,熟悉 其 含义 和 作用 。 另 外 每 一 
个 HTML 标记 或 者 称 为 HTML 元 素 ( 有 时 也 称 HTML 标签 ) 都 可 看 成 一 个 在 浏览 器 中 显 
示 的 对 象 。 层 到 样式 单 CSS 的 作用 就 是 为 网 页 上 的 HTML 元 素 精 确 地 定位 ,控制 HTML 
元 素 的 外 观 显示 ,可 以 把 网 页 上 的 显示 内 容 和 显示 外 观 相 分 离 。 

注意 : HTML 标记 (tag) 和 HTML 元 素 (element) 是 两 个 不 同 的 概念 ,在 HTML 文档 
对 象 编程 模型 中 把 HTML 标记 称 为 元 素 。 实 际 使 用 中 常常 不 加 区 分 ,本 书 有 时 会 混用 这 
两 种 术语 。 


3.1 HTML 基础 


HTML 是 World Wide Web 的 描述 语言 。 用 HTML 语言 编写 的 网 页 文件 ,也 称 
HTML 页 面 文件 ,或 称 HTML 文档 ,是 由 HTML 标记 组 成 的 描述 性 文本 。HTML 标记 
可 以 说 明文 字 、 图 形 、 动 画 、 声 音 、 表 格 、 链 接 等 。 有 人 要 问 ,既然 有 那么 多 工具 可 以 实现 
HTML 文档 的 可 视 化 制作 ,自动 生成 一 个 HTML 文档 ,为 什么 还 要 费时 费力 来 学 习 呢 ? 工 
具 只 是 辅助 生成 一 个 静态 网 页 ,但 并 不 能 完成 所 有 网 页 的 制作 ,很 多 时 候 是 要 在 生成 的 网 页 
中 直接 编写 和 修改 HTML 代码 ,生成 你 所 需要 的 动态 HTML 网 页 。 学 习 和 掌握 HTML 
语言 的 常用 标记 对 一 个 Web 开发 者 来 说 是 一 项 基本 要 求 。 


3.1.1 HTML 文 件 基本 结构 


HTML 文件 的 结构 包括 头 部 (head) .主体 (body) 两 大 部 分 , 头 部 描述 浏览 器 所 需 的 信 
息 ,主体 包含 所 要 说 明 的 具体 内 容 。HTML 文件 通常 使 用 * 二 标记 名 之 >” 和”* 二 /标记 名 之 ” 
来 表示 标记 的 开始 和 结束 ,因此 在 HTML 文件 中 标记 一 般 是 配对 使 用 的 。 不 配对 使 用 的 
标记 占 少 数 。 一 个 HTML 页 面 文件 的 最 基本 结构 为 : 

<HIML> 

<HEAD> <TITLE> 浏览 器 窗口 显示 的 窗口 标题 </TITLE> </HEAD> 


<BODY> … Web 页 面 内容 </BODY> 
</HTML> 


首先 文件 中 各 个 标记 必须 包含 在 HTML 之 和 </HTML>> 之 间 , 过 HEAD 之 和 
二 /HEAD 和 标记 是 网 页 头 部 标识 .浏览 器 窗口 标题 放 在 其 中 的 二 TITLE 宝 和 二 /TITLE 才 
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之 间 。 所 有 需要 在 浏览 器 中 显示 的 标记 内 容 放 在 二 BODY 之 和 过 /BODY 二 之 间 。 
【 例 3. 1】 在 浏览 器 中 显示 下 面 的 HTML 文档 。 


<! DOCTYPE HTML PUBLIC " - //W3C//DTD HTML 4. 01 Transitional//EN" "http://www，w3. org/TR/ 
html4/loose. dtd"> 

<html> 

<! -- 这 是 一 个 HTML 文档 基本 标记 演示 -一 > 

<head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
<title> HTML 文档 基本 标记 演示 </title> 

</head> 

<body> 

这 是 一 个 HTML 文档 基本 标记 演示 效果 ! 

</body> 

</html > 


该 文档 的 显示 效果 如 图 3-1 所 示 。 


[SE I EL 


图 3-1 HTML 文档 的 基本 标记 显示 效果 
从 上 例 可 以 看 出 ,一 个 完整 的 HTML 文档 由 文档 类 型 HTML 语言 标记 、 头 元 素 标记 、 
网 页 标题 标记 主体 元 素 标记 ,注释 标记 组 成 。HTML 文档 基本 结构 如 表 3-1 所 示 。 
表 3-1 HTML 文档 基本 结构 
序 号 标记 类 型 说 明 
HTML 文档 中 的 文档 类 型 标记 "DOCTYPE" 指 定 文档 中 使 用 了 哪个 版 本 


的 HTML, 并 可 以 和 哪个 验证 工具 一 起 使 用 ,以 保证 此 HTML 文档 与 
HTML 推荐 标准 的 一 致 。 例 如 : 


<! DOCTYPE HTML PUBLIC " ~ //W3C//DTD HTML 4.01 Transitional// EN" 
"http://www. w3.org/TR/htm14/1oose. dtd"> 


表明 此 文档 应 符合 W3C 制定 的 HTML 4. 01 规范 。 又 例如 在 VS 2010 
中 新 建 的 HTML 文档 中 第 一 行为 : 


<! DOCTYPE html PUBLIC " ~ //W3C//DTD XHTML 1. 0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1 ~ transitional. dtd"> 


表明 此 文档 应 符合 W3C 制定 的 XHTML 1.0 规范 ,也 就 是 要 求 此 文档 应 
按照 XML 文档 规范 来 配对 所 有 标记 。 

文档 类 型 是 每 个 HTML 文档 必需 的 ,如 果 HTML 文档 中 没有 文档 类 型 
标记 ,浏览 器 会 采用 默认 的 方式 即 W3C 推荐 HTML 4. 0 来 处 理 此 
HTML 文档 


于 文档 类 型 
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续 表 
序 号 标记 类 型 说 明 
在 编写 HTML 语言 源 代码 时 以 二 html 二 来 标记 一 个 HTML 文档 的 开 
始 ,以 天 /html> 标 记 整 个 文档 的 结束 
每 个 HTML 文档 都 包含 一 个 头 元 素 (head) 。 头 元 素 中 的 内 容 一 般 不 会 
3 头 元 素 标记 在 显示 窗口 中 显示 出 来 。HTML 文档 的 头 元 素 以 二 head 盖 开头 ,而 以 
一 /head 二 结束 
标题 是 头 元 素 的 一 部 分 ,因此 ,一 title 二 … 一 /title 二 必须 包含 在 二 head 二 
… 达 /head 二 之 内 。 标 题 会 出 现在 浏览 器 窗口 标题 栏 上 。 用 户 将 该 网 页 
添加 到 收藏 夹 或 书签 时 ,其 名 称 默认 为 网 页 标题 ; 另外 搜索 引擎 在 进行 
分 类 搜索 时 也 会 按 网 页 标题 搜索 
HTML 文档 的 主体 部 分 是 一 个 区 域 ,用 来 放置 文档 的 内 容 , 例 如 文本 、 图 
像 ,等 等 。 主 体 以 二 body 开 始 ,以 二 /body 二 结束 。 页 面 背景 颜色 与 图 
像 在 该 标记 中 设置 方法 如 下 。 
(1) 用 图 像 填充 背景 


<body background = url> 
其 中 background 表示 背景 图 像 文件 所 在 的 URL 地 址 。 例 如 : 
名 主体 元 素 标记 < body background = "file:///C:/windows/Bubbles. bmp"> 


(2) 用 某 种 颜色 填充 背景 

二 body bgcolor 一 颜色 名 二 其 中 bgcolor 表示 背景 颜色 。 例 如 : 二 Body 
Bgcolor= Red> 

颜色 可 用 颜色 名 称 如 "green" ,十 六 进 制 并 RRGGBB 如 "#00FFEE"、 函 数 
rgb(r,g，b) 如 "rgb(20,20,50)"、 函 数 rgb(r%,g%,b%) 如 " rgb(20%， 
20% ,50%)" 来 表示 。 红 绿 蓝 颜色 分 量 取 值 为 0~~255。 颜 色 分 量 百分数 
是 相对 255 而 言 。 例 如 :二 Body Bgcolor = 二 "rgb(20,20,50)" 二 

HTML 标记 中 ,可 用 属性 来 描述 标记 的 外 观 和 行为 方式 以 及 内 在 表现 。 
上 面 主体 元 素 中 的 bgcolor 就 是 body 的 属性 。 可 根据 实际 情况 给 标记 设 
置 属 性 。 例 如 : 


<R id= "mylink" href = "aa.htm" title = "It's me"> 我 是 超 链接 </A> 


2 HTML 标记 


4 网 页 标题 标记 


6 | 标记 的 属性 。 | 上 述 超 链接 标记 中 ,id 为 超 链接 定义 了 一 个 标识 ,因为 HTML 页 面 文档 
中 可 能 有 很 多 个 超 链接 ,通过 id 可 以 确定 是 哪个 超 链接 ,也 可 通过 name 
属性 来 指定 。title 属性 实现 了 将 鼠标 指针 放 在 该 超 链接 标记 上 时 ,会 显 
示 一 个 动态 文本 提示 框 Its me。title 属性 大 多 数 标记 所 具有 的 属性 。 每 
个 标记 有 很 多 属性 ,但 有 许多 是 共同 属性 

HTML 中 的 注释 始终 以 "一 ! 一 一 ”开始 ,以 "一 一 >” 结 尾 。 注 释 可 以 攻 
助人 们 理解 代码 。 浏 览 器 会 忽略 注释 内 部 的 所 有 文本 和 标记 


7 注释 标记 


下 面 重 点 来 介绍 一 下 HTML 页 面 HEAD 元 素 中 的 meta 标签 。 

meta 标签 是 HTML 语言 HEAD 区 的 一 个 辅助 性 标签 , 它 位 于 HTML 文档 头 部 的 
二 HEAD 放 标记 和 二 TITLE 才 标记 之 间 ,提供 一 些 用 户 不 可 见 的 信息 。meta 标签 通常 用 来 
为 搜索 引擎 robots 定义 页 面 主题 ,或 者 是 定义 用 户 浏览 器 上 的 cookie; 它 可 以 用 于 鉴别 作 
者 , 设 定 页 面 格式 ,标注 内 容 提 要 和 关键 字 ; 还 可 以 设置 页 面 使 其 可 以 根据 定义 的 时 间 间 隔 
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刷新 本 页 面 的 显示 等 。meta 标签 分 两 大 部 分 : HTTP 标题 信息 (HTTP-EQUIV) 和 页 面 描 
述 信息 (NAME)。 

1. HTTP-EOUIV 

HTTP-EQUIV 类 似 于 HTTP 的 头 部 协议 , 它 回 应 给 浏览 器 一 些 有 用 的 信息 ,以 帮助 
正确 和 精确 地 显示 网 页 内 容 。 常 用 的 HTTP-EQUIV 类 型 有 : 

1) Content-Type 和 Content-Language( 显 示 字 符 集 的 设 定 ) 

设 定 页 面 使 用 的 字符 集 , 用 以 说 明 页 面 制作 所 使 用 的 文字 以 及 语言 ,浏览 器 会 据 此 来 调 
用 相应 的 字符 集 显 示 page 内 容 。 例 如 : 


< Meta http - equiv = "Content - Type" Content = "text/html; Charset = GB2312"> 
<Meta http - equiv = "Content - Language" Content = "zh— CN"> 


该 meta 标签 定义 了 HTML 页 面 所 使 用 的 字符 集 为 GB2132, 就 是 国标 汉字 码 。 如 果 
将 其 中 的 “Charset 二 GB2312” 替 换 成 “BIG5”, 则 该 页 面 所 用 的 字符 集 就 是 繁体 中 文 Big5 
码 。 当 浏览 一 些 国 外 的 站 点 时 ,IE 浏览 器 会 提示 你 要 正确 显示 该 页 面 需 要 下 载 xx 请 支持 。 
这 个 功能 就 是 通过 读 取 HTML 页 面 meta 标签 的 Content-Type 属性 而 得 知 需要 使 用 哪 种 
字符 集 显 示 该 页 面 的 。 如 果 系 统 里 没有 装 相 应 的 字符 集 , 则 IE 就 提示 下 载 。 不 同 的 语言 对 
应 不 同 的 Charset, 比如 日 文 的 字符 集 是 “iso-2022-jp”, 韩文 的 是 “ks_c_5601”。 目前 
Charset 一 般 取 为 UTF-8(Unicode Transformation Format-8), 它 是 一 种 通用 字符 集 。 

2) Refresh( 刷 新 ) 

让 网 页 多 长 时 间 ( 秒 ?刷新 自己 ,或 在 多 长 时 间 后 让 网 页 自动 链接 到 其 他 网 页 。 例 如 : 


<Meta http - equiv = "Refresh" Content = "30"> 
< Meta http- equiv = "Refresh" Content = "5; Url = http://www. xia8. net"> 


注意 : 其 中 的 5 是 指 停留 5 秒 钟 后 自动 刷新 到 URL 网 址 。 
3) Expires( 网 页 失效 期 限 ) 
指定 网 页 在 缓存 中 的 过 期 时 间 ,一 旦 网 页 过 期 ,必须 到 服务 器 上 重新 下 载 。 例 如 


<Meta http - equiv = "Expires" Content = "0"> 
<Meta http - equiv = "Expires" Content = "Wed, 26 Feb 1997 08:21:57 GMT"> 


注意 : 必须 使 用 GMT 的 时 间 格 式 来 表示 多 少时 间 后 过 期 或 直接 设 为 数字 0 表示 本 次 
调用 后 就 过 期 。 

4) Pragma(cache 模式 ) 

禁止 浏览 器 从 本 地 机 的 缓存 中 调 阅 页 面 内 容 。 例 如 : 


<Meta http - equiv = "Pragma" Content = "No - cache"> 


注意 : 网 页 若 不 保存 在 缓存 中 , 则 每 次 访问 都 会 刷新 页 面 。 这 样 设 定 ,访问 者 将 无 法 脱 
机 浏览 。 

5) Set-Cookie(cookie 设 定 ) 

浏览 器 访问 某 个 页 面 时 会 将 它 存在 缓存 中 ,下 次 再 次 访问 时 就 可 从 缓存 中 读 取 ,以 提高 


23 
第 3 章 HTML 基础 与 


速度 。 当 你 希望 访问 者 每 次 都 刷新 广告 的 图 标 , 或 每 次 都 刷新 你 的 计数 器 ,就 要 禁用 缓存 
了 。 通 常 对 HTML 文件 没有 必要 禁用 缓存 ,对 于 ASP 等 页 面 ,就 可 以 使 用 禁用 缓存 ,因为 
每 次 看 到 的 页 面 都 是 在 服务 器 动态 生成 的 ,缓存 就 失去 意义 。 如 果 网 页 过 期 ,那么 存盘 的 
cookie 将 被 删除 。 注 意 : 必须 使 用 GMT 的 时 间 格 式 。 例 如 : 


<Meta http - equiv= "Set — Cookie" Content = "cookievalue = xxx; 
expires = Wednesday, 21 - Oct — 98 16:14:21 GMT; path = /"> 


6) Content-Script-Type( 设 置 默 认 脚 本 语言 
通过 Content 属性 为 整个 页 面 设置 默认 脚本 语言 。 例 如 设 为 JavaScript 请 言 : 


<Meta http - equiv = "Content - Script - Type" Content = "text/javascript"> 


2. Name 属性 
使 用 name 属性 的 一 般 格式 是 : 


<Meta name = ".…" Content ="… "> 


name 属性 用 于 指定 网 页 参数 类 型 ,常用 的 有 keywords、description 等 。Content 用 于 
指定 该 参数 的 实际 内 容 , 以 便于 搜索 引擎 机 器 人 查找 ,分 类 该 网 页 。 

1) keywords( 关 键 字 ) 

为 搜索 引擎 提供 搜索 关键 字 列 表 。 用 法 : 


<Meta name = "keywords”Content = "关键 字 1, 关键 字 2, 关键 字 3, 关键 字 4, … "> 


注意 : 各 关键 字 间 用 英文 过 号 隔 开 。 
2) Description( 简 介 ) 
Description 用 来 告诉 搜索 引擎 你 的 网 站 主要 内 容 。 例 如 : 


<Meta name = "description"” Content = "你 网 站 的 简介 "> 


根据 现在 所 流行 搜索 引擎 (Google、Lycos、AltaVista 等 ) 的 工作 原理 ,搜索 引擎 先 派 机 
器 人 自动 在 Web 上 搜索 , 当 发 现 新 的 网 站 时 , 便 检索 页 面 中 的 Keywords 和 Description ,并 
将 其 加 入 到 自己 的 数据 库 , 然 后 再 根据 关键 字 的 密度 将 网 站 排序 。 

3) Robots( 机 器 人 向 导 ) 

用 来 告诉 搜索 机 器 人 哪些 页 面 需要 索引 ,哪些 页 面 不 需要 索引 。Content 的 参数 有 all、 
none index\noindex ,follow .nofollow。 默 认 是 all。 用 法 如 下 : 


< Meta name = "Robots" Content = "All|None|Index|Noindex |Follow|Nofollow"> 


注意 : all 表示 文件 将 被 检索 , 且 页 面 上 的 链接 可 以 被 查询 ; index 表示 文件 仅 被 检索 ; 
follow 表示 页 面 上 的 链接 可 以 被 查询 。 

4) Author( 作 者 )、Copyright( 版 权 )、Generator( 编 辑 器 ) 

说 明 : 分 别 用 于 标注 网 页 的 作者 或 制作 组 ,标注 版 权 及 说 明 所 使 用 的 编辑 器 。 
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用 法 : 


<Meta name = "Author" Content = " 张 三 , abc@ sohu. com"> 
<Meta name = "Copyright" Content = "本 页 版 权 归 Tim 所 有 ."> 
< Meta name = "Generator" Content = "PCDATA|FrontPage|"> 


【 例 3.2】 一 个 Meta 标签 应 用 的 例子 。 


<head> 

<title> 文 件 头 ,显示 在 浏览 器 标题 区 </title> 

<meta http - equiv = "Content - Language" content = "zh 一 cn"> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
< meta name = "GENERATOR" content = "Microsoft FrontPage 4.0"> 

<meta name = "ProgId" content = "FrontPage. Editor. Document"> 

<meta name = "制作 人 " content = "Simonzy"> 

<meta name = "主题 词 ” content = "HTML 网 页 制作 C# . NET JavaScript JS"> 
<meta name = "description" content = "网 站 的 简介 "> 

<meta name = "keywords”content = "Web, DHTML, 软件 开发 "> 

</head> 


3.1.2 文本 和 格式 标记 


丰富 多 彩 的 HTML 网 页 需要 修饰 和 衬托 其 内 容 , 文 本 和 格式 标记 是 标记 语言 中 的 最 
基本 的 标记 。 文 本 和 格式 标记 如 表 3-2 所 示 。 
表 3-2 文本 和 格式 标记 


序 号 标 记 说 明 
字体 加 粗 .斜体 二 b 二 … 二 /b 二 用 来 使 文本 以 黑体 字 的 形式 输出 ,也 可 用 二 strong 二 … 
和 下 划 线 标记 三 /strong> 标 记 。 二 i 二 … 过 /i 忆 用 来 使 文本 以 斜体 字 的 形式 输出 ; 


三 u>… 达 /用 来 使 文本 以 加 下 划 线 的 形式 输出 
到 font>…< 到 /font> 可 以 对 输出 文本 的 字体 大 小 、 颜 色 进行 随意 地 改变 ， 
这 些 改变 主要 是 通过 对 它 的 两 个 属性 size 和 color 的 控制 来 实现 的 。size 


字体 大 小 和 颜 


2 色 设置 标记 属性 用 来 改变 字体 的 大 小 ,其 取 值 可 以 为 1 一 7( 从 小 到 大 ); 而 color 属性 
则 用 来 改变 文本 的 颜色 。 例如 二 font size==2 color== Red> click me 
</font> 

3 标题 字体 大 小 | 描绘 网 页 的 新 的 小 节 和 子 小 节 的 7 个 标题 ,依次 为 <hl 二 … 二 /hl 二 、…、 

标记 去 h7>… 所 /h7 之 。 这 些 标题 的 字体 大 小 依次 从 大 到 小 


段落 标记 的 作用 是 将 一 p 之 …<</p> 标 记 之 间 的 文本 内 容 自 动 组 成 一 个 
完整 的 段落 。 一 个 段落 是 有 格式 的 ,因此 段落 标记 往往 与 align( 对 齐 方 
式 ) 属 性 共同 使 用 。 使 用 的 语法 是 二 p align= 二 "" 二 二 /p 二 ,其 中 ,属性 
align 的 值 可 以 取 “left”( 左 对 齐 )、“center”( 居 中 ) 和 “right”( 右 对 齐 ) 


4 段落 标记 


扫 br> 用 来 创建 一 个 软 回 车 换行 ,没有 结束 标记 。 在 一 p 之 … 王 /p> 标 记 
后 键入 二 br 二 ,会 在 该 段落 后 创建 一 个 较 大 行距 的 回 车 换行 ; 如 果 在 段 
落 标记 之 间 键 入 二 br 二 , 则 行距 较 小 。 二 wbr 二 … 二 /wbr 二 标记 可 将 其 
中 的 文本 段 自动 换行 显示 


5 文本 换行 标记 


在 文本 缩 进 标记 (一 blockquote 二 … 一 /blockquote 二 ) 之 间 加 入 的 文本 将 
6 | 文本 缩 进 标记 | 会 在 浏览 器 中 按 两 边 缩 进 的 方式 显示 出 来 


7 文本 居中 二 center>… 过 /center> 标 记 可 将 其 中 的 文本 居中 显示 
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续 表 
号 标 记 说 明 


(D<d>…</d> ,<dt>…</d> 和 <dd>…</dd> 

二 dl 二 … 过 /dl 二 > 用 来 创建 一 个 普通 的 列表 ,二 dt 二 … 二 /dt 用 来 创建 列 
表 中 的 上 层 项 目 , 二 dd 之 … 志 /dd 之 用 来 创建 列表 中 最 下 层 项 目 , 二 dt> 
…<</dt> 和 <<dd>>…<</dd>> 都 必须 放 在 王 dl 之 …<</dl> 标 记 对 之 间 
(2) <ol>…</ol> ,<u>…< /ul 和 和 <I>…</l> 

过 ol 二 … 达 /ol 二 标记 对 用 来 创建 一 个 标 有 顺序 的 列表 ; 二 u 之 …<</ul> 
标记 对 用 来 创建 无 顺序 的 列表 ; 二 li>… 过 /li> (li 是 list item 的 缩写 , 即 
列表 项 目 ) 标 记 对 只 能 在 一 ol 之 … 到 /ol> 或 二 ul>… 到 /ul> 标 记 对 之 间 
使 用 ,此 标记 对 用 来 创建 一 个 列表 项 , 若 二 li 二 >… 一 /li 二 > 放 在 过 ol 二 … 
二 /ol 二 之 间 则 每 个 列表 项 加 上 一 个 数字 , 若 在 二 ul 二 … 一 /ul 二 之 间 则 每 
个 列表 项 加 上 一 个 圆 点 。 无 序列 表 和 有 序列 表 分 别 与 Microsoft Word 中 
项 目 符号 和 编号 相对 应 。 它 们 的 含义 是 一 样 的 


8 列表 标记 


二 div 二 … 达 /div> 标 记 对 用 来 排版 大 块 段落 ,此 标记 的 用 法 与 过 p 记 … 
二 /p 二 标记 非常 相似 ,同样 可 以 使 用 align 属性 。 一 span 二 … 一 /span 二 
此 处 也 是 文本 块 标记 ,用 法 和 div 标记 类 似 ,但 该 文本 块 起 始 和 结束 不 换 
9 文本 块 标记 行 。div 和 span 标记 除 可 用 作文 本 编辑 块 功 能 外 还 可 用 作 容 器 标记 ,也 
即 按钮 .文本 框 等 各 种 标记 放 在 div 或 span 里 面 将 作为 它 的 子 对 象 元素 
处 理 。 二 address… 一 /address 二 标记 与 二 div 标 记 作 用 相同 ,就 是 显 
示 一 块 文本 ,但 里 面 的 字体 只 能 是 斜体 ,主要 用 来 在 网 页 上 放置 署名 信息 


三 hr 二 标记 在 网 页 中 可 画 一 条 指定 粗细 和 长 短 的 水 平 线 。 例 如 二 hr 
color 一 red noshade width 一 200 size 一 4 align 一 right> 表示 夯 一 条 右 对 齐 
10 特殊 符号 的 表示 | 的 粗 红线 
"&nbsp;"、"&copy;"," Breg;"," Bamp;"、" &lt;"、" Bgt;"、" B123;" 等 
显示 在 浏览 器 中 分 别 表示 为 空格 "©"、"@"、"&"、"<<"、">"、"}" 符 号 


【 例 3.3】 体验 HTML 文档 格式 标记 的 应 用 。 
该 文档 的 显示 效果 如 图 3-2 所 示 。 


<html><head> 
<title> HTML 文档 格式 标记 的 演示 效果 </title> </head> 

<body> 

<p align= "left">< blockquote > 组 成 一 个 计算 机 系统 的 各 种 设备 称 为 硬件 。 可 将 一 台 计 算 机 划分 
为 6 个 逻辑 部 件 或 部 分 。 具 体 划 分 如 下 : </blockquote></p><br> 

<ol type= A><1i><palign= "left"> 输入 部 件 。 这 是 计算 机 的 "输入 "部 分 ……</p> </1i> 
<1li> <palign= "left"> 输出 部 件 。 这 是 计算 机 的 "输出 "部 分 ……</p> </1i> 

<1li> <palign="left"> 存储 器 。</p> </1i> 

</ol> 

<ul type= circle><li><palign = "left"> 算 术 逻 辑 部 件 (MLU) 。</p></1i> 
<1i><palign= "left"> 辅 助 存储 器 。 </p></1i> 

<1i><p align = "left"> 中 央 处 理 器 (CPU) 。</p></1i> 

<1i><p align = "left"> 辅 助 存储 器 。 </p></1i> 

</ul> 

<div> 此 处 是 文本 块 标记 ,该 文本 块 起 始 和 结束 自动 加 了 软 回 车 功能 ,起 始 和 结束 都 换行 </div> 
< span> 此 处 也 是 文本 块 标记 ,该 文本 块 起 始 和 结束 不 换行 </span> 

</body> </html > 
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当 HT 文档 格式 标志 的 演示 效果 - Microsoft Internet Ezplorer [| 
文件 四 久 缉 双 ) 查看 QI 收 戌 ) 工具 必 助 加 


@an .日 国 国 的 记 e 交 wx 如 | 全 -各 


起 址 四 | 本 Phtal\3-2. html 


组 成 一 个 计算 机 系统 的 各 种 设备 称 为 硬件 。 不 考虑 物理 外 
观 的 差别 ， 可 以 将 一 台 计 算 机 划分 为 六 个 逻辑 部 件 或 部 
分 。 具 体 刘 分 如 下 ， 


。 输入 部 件 。 这 是 计算 机 的 “接收 ”部 分 。 它 获取 来 自 和 名 种 输入 
设备 的 信息 并 且 使 其 他 部 分 能 够 获得 这 些 信息 ， 以 便 对 这 些 信 
S 进行 处 理 。 大 多 数 信息 是 通过 键盘 、 鼠 标 和 磁盘 答 入 计算 机 


输出 部 件 。 这 是 计算 机 的 “输出 部 信行 人 
和 入 


印 在 纸 上 、 通 过 扬声器 和 视频 设备 播放 、 通过 磁 记 录 设 膨 记录 
在 磁盘 或 磁带 上 。 


图 3-2 HTML 文档 格式 标记 显示 效果 
【 例 3.4】 HTML 文档 常用 文本 标记 。 


< htm]l > 
<head> 
<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312"> 
<title> HTML 文档 格式 标记 的 演示 效果 </title> 
</head> 
<body> 

< h2 > 这 是 一 本 专业 的 Dreamweaver MX 2004 的 书籍 < h2 > 

<h3>< i> What we are doing is just what you need. </i></h3> 

< center >< h4 >< font color = "blue">< u> www. cqu. edu. cn </u>< font ></h4 ></center> 

</body> 
</html > 


该 文档 的 显示 效果 如 图 3-3 所 示 。 


济 HTmr 文档 格 式 标志 的 演示 效果 - Hicrosoft Internet Explorer 此 ] 耻 |] 区] 
文件 四 编 得 @) 查看 收 若 疏 ) 工具 CD) 帮助 0 


Ga 日 - 国 国 的 | Pa 亦 wmx @ | 全 -对 


起 址 加) | 稳 E:\htn1\3-3. htnl 


这 是 一 本 专业 的 Dreamweaver MX 2004 的 书 


Mhat we are doing is just what you need. 


.cqu. edu. cn 


图 3-3 HTML 文档 常用 标记 显示 效果 
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3.1.3 超 链接 标记 和 表格 标记 
超 链接 标记 和 表格 标记 如 表 3-3 所 示 。 
表 3-3 超 链接 标记 和 表格 标记 
序号 | 标 记 说 明 
HTML 最 重要 的 功能 之 一 是 能 创建 到 其 他 文档 的 超 链接 。 在 网 页 中 ,链接 标记 是 
用 二 a 二 … 一 /a 二 来 表示 的 。 利 用 二 a (anchor, 锚 点 ) 就 可 以 在 文档 之 间 建 立 链 
接 。 在 HTML 中 ,充当 钳 点 的 既 可 以 是 文本 ,也 可 以 是 图 像 .声音 文件 。 因 此 钳 点 


元 素 要 求 有 特定 的 属性 href(hot reference) 来 指定 超 链 接 。href 属性 放 在 锚 点 元 
素 二 a> 内 ,例如 : 


<a href = "http://www. cqu. edu. cn"> 重 庆 大 学 </a> 


href 属性 所 指定 的 链接 文件 可 以 是 另外 一 个 网 站 的 页 面 ,也 可 以 是 本 网 站 中 的 某 
一 个 页 面 或 者 是 本 页 面 中 的 某 个 部 位 。 如 果 是 本 网 站 内 的 页 面 链 接 ,href 所 指定 
的 文件 名 应 该 用 相对 路 径 ,而 不 用 绝对 路 径 ,避免 因为 域名 或 者 IP 地 址 变更 等 需 
要 对 超 链 接 标 记 进行 修改 的 问题 。 例 如 当前 的 页 面 位 于 根 目录 下 的 files 子 目 录 
下 ,需要 超 链 接 到 根 目录 下 的 asp 子 目 录 中 的 b. htm 页 面 , 超 链接 标记 写法 如 下 : 


<a href ="../asp/b. htm"> 公 司 简介 </a> 
也 可 写成 : 


<a href = "/asp/b. htm"> 公 司 简介 </a> 


二 a 二 标记 有 一 个 target 属性 ,其 取 值 可 为 _blank、top、 self、parent 等 ,其 中 
超 链接 | _blank 是 指 链 接 文件 在 新 的 窗口 中 打开 ; _parent 是 链接 文件 将 在 当前 窗口 的 父 

标记 级 窗口 中 打开 ; _self 是 链接 文件 在 当前 窗口 ( 帧 ) 中 打开 ; _top 是 链接 文件 全 屏 显 
示 。 下 例 表 示 在 新 打开 的 浏览 器 窗口 中 显示 重庆 大 学 的 主页 : 


<a href = "http://www. cqu. edu. cn" target = "_blank"> 重 庆 大 学 </a> 


另外 也 可 在 同一 个 文件 中 建立 链接 ,方法 是 先 在 href 中 声明 链接 名 称 ( 必 须 带 有 间 
号 ) ,再 用 name 属性 说 明 被 链接 的 名 称 , 这 样 单 击 超 链接 就 会 转向 本 页 中 其 他 位 
置 。 例 如 : 


<a href =" 井 myhnchor"> 跳 转 到 本 页 尾部 </a> 
<a name = "myAnchor"> 此 处 为 本 页 尾部 信息 </a> 


如 果 要 从 一 个 页 面 a. htm 中 直接 跳 转 到 另外 一 个 页 面 b. htm 的 某 个 部 位 ,可 在 
a. htm 页 面 中 建立 如 下 超 链接 : 


<a href = "b.htm# myanchor"> 查看 软件 工程 专业 介绍 </a> 


然后 在 页 面 b. htm 中 建立 name 属性 说 明 被 链接 的 位 置 : 
<a name = "myAnchor"> 此 处 为 软件 工程 专业 介绍 </a> 


注意 页 面 a. htm 中 href 属性 的 书写 格式 
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标 记 


续 表 
说 明 


【 例 3.5】 


与 文本 相 比 ,表格 的 主要 优点 是 简洁 ,给 人 一 目 了 然 的 感觉 。 应 用 到 表格 的 所 有 标 
记 和 文本 都 包含 在 二 table 之 … 王 /table 之 内 。 表 格 主要 有 3 个 属性 , 即 border、 
width 和 height。border 属性 用 于 设置 表格 边框 的 宽度 ,以 像素 点 为 单位 。 如 果 想 
显示 边框 ,可 指定 border 一 "1" ,反之 则 设置 为 border 王 "0"。 而 width 和 height 属 
性 分 别 设置 表格 的 宽度 和 高 度 。 可 将 表格 的 宽度 /高 度 设置 为 一 个 像素 值 ,或 所 占 
屏幕 宽度 /高 度 的 百分比 值 。 通 过 下 面 的 方法 定义 表格 : 


< TABLE BORDER = 1 WIDTH= 80 %> 
<TR><TH> Heading 1 </TH> <TH> Heading 2 </TH> </TR> 

<TR><TD> Row 1, Column 1 text.</TD> < TD> Row 1, Column 2 text.</TD> </TR> 
<TR> <TD> Row 2, Column 1 text.</TD>< TD> Row 2, Column 2 text.</TD> </TR> 
</TABLE > 


表格 样式 结构 如 图 3-4 所 示 。 
其 中 ,二 TABLE 二 … 二 /TABLE 定义 表 格 ; 二 TR… 
二 /TR 定义 表 的 行 ; 二 TH 二 … 二 /TH 二 定义 列 标 


Heading 1 Heading 2 
Row 1, Cohmnn 1 text. ||Row 1, Column 2 text 


Row 2, Column 1 text. [Row 2, Colurm 2 text 


题 ; TD>…<</TD>> 定 义 表格 数据 单元 。 图 3-4 所 
示 表 格 的 另外 一 种 定义 方法 是 : 图 3-4 表格 显示 页 面 


< TABLE BORDER = "1" width = "500"> 

<THEAD><TR> <TH> Heading 1 </TH> <TH> Heading 2 </TH> </TR></THEAD> 
<TBODY> 

< TR>< TD> Row 1, Column 1 text.</TD> < TD> Row 1, Column 2 text.</TD> </TR> 
</TBODY > <TBODY> 

<TR> <TD> Row 2, Column 1 text.</TD>< TD> Row 2, Column 2 text.</TD> </TR> 
</TBODY > </TABLE> 


其 中 ,<THEAD>>…</THEAD> 定 义 表格 的 表 头 ; <TBODY>>…</TBODY> 
用 于 格式 化 和 分 组 表格 ,可 将 表格 按 行进 行 分 组 ,以 便 进行 分 组 色彩 指定 或 用 于 其 
他 目的 

很 多 网 站 在 页 面 布局 的 时 候 喜 欢 采用 表格 来 布局 。 一 个 网 页 要 尽量 避免 用 整个 一 
张大 表格 ,所 有 的 内 容 都 嵌 套 在 这 个 大 表格 之 内 。 因 为 浏览 器 在 解释 页 面 的 元 素 
时 ,是 以 表格 为 单位 逐一 显示 的 ,如 果 网 页 是 嵌 套 在 一 个 大 表格 之 内 ,那么 其 后 果 
很 可 能 是 , 当 浏 览 者 访问 页 面 时 ,必须 等 待 所 有 页 面 信息 下 载 完 毕 后 网 页 内 容 才 出 
现 。 在 这 种 情况 下 ,请 使 用 TBODY 二 标记 ,以 便 能 够 使 这 个 大 表格 分 块 显示 , 减 
少 用 户 的 等 待 时 间 


体会 用 二 TBODY 二 将 表格 的 行进 行 分 组 的 过 程 。 


< TABLE BORDER = " " BGCOLOR = "lightslategray"> 
< THEAD BGCOLOR = "lightskyblue"> 

<TR><TH> Stock symbol </TH><TH> High</TH><TH> Low</TH>< TH> Close </TH> </TR> 
</THEAD> 
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< TBODY BGCOLOR = "lemonchiffon"> 


<TR><TD> ABCD</TD><TD> 88.625 </TD><TD>85.50</TD><TD> 85.81 </TD></TR> 
<TR><TD> EFGH</TD><TD>102.75</TD><TD>97.50</TD><TD>100.063</TD></TR> 
</TBODY > 
< TBODY BGCOLOR = "goldenrod"> 
<TR><TD> IJKL</TD><TD>56.125</TD><TD>54.50</TD><TD>55.688</TD></TR> 
<TR><TD>MNOP</TD><TD>71.75</TD><TD>69.00</TD><TD> 69.00</TD></TR> 
</TBODY> 
< TFOOT BGCOLOR = "lightskyblue"> 
<TR><TD COLSPAN = "4"> Quotes are delayed by 20 minutes.</TD ></TR> 
</TFOOT> 
< CAPTION VALIGN = "BOTTOM" STYLE = "font - size=12;"> 
Created using HTML. 
</CAPTION> 
</TABLE> 


该 文档 的 显示 效果 如 图 3-5 所 示 。 志 TFOOT 二 …</TFOOT 二 定义 了 表格 的 脚注 。 


<CAPTION 二 …< 一 /CAPTION>> 提供 表格 的 简要 信息 描述 。 


CInetpub\ wwwroot\index htm - Microsol iE 
文件 久久 (中 查看 收 夸 A) 工具 (D 玫 
FE. 小 -加 加 全 | 风 珊 归 辐 收 天 


图 3-5 带 TBODY 的 表格 显示 效果 


3.1.4 图像. 视频 与 动画 、 声 音 处 理 标 记 


图 像 .视频 与 动画 声音 处 理 标记 如 表 3-4 所 示 。 
表 3-4 图 像 ,视频 与 动画 ,声音 处 理 标记 
号 | 标 记 说 明 


标记 格式 为 : 过 IMG SRC= URL ALT=text_1 BORDER=n_1 HEIGHT=n_2 
WIDTH=n_3 ALIGN= mode HSPACE=n_3 VSPACE=n 4> 

其 中 SRC 表示 图 像 来 源 (Source) 文 件 所 在 的 URL 地 址 ,alt 设置 将 鼠标 移 到 该 图 
像 上 出 现 的 文字 提示 text_1, border 表示 图 像 对 象 的 边界 厚度 为 n_1,height 和 
1 图 像 标记 | width 分 别 表示 图 像 的 高 度 和 宽度 分 别 为 n_2 和 n_3,hspace 和 vspace 表示 图 像 横 
向 和 纵向 的 空白 边 幅 分 别 为 n_3 和 n_4。align 表示 图 像 的 放置 方式 , mode 一 
ABSBOTTOM | ABSMIDDLE | BASELINE | BOTTOM | LEFT | MIDDLE | 
RIGHT | TEXTTOP | TOP。 例如 : <img src 一 "http://202. 202. 0. 35/images/ 
1.jpg" height=200 width=300> 
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续 表 
序 号 | 标 记 说 明 
标记 格式 为 : 二 IMG dynsrc 一 url alt 一 text_1 border 一 n_1 height 一 n_2 width 一 n_3 
ALIGN= mode hspace=n_3 vspace 一 n_4 start 一 fileopen/onmouseover Loop=n> 
其 中 dynsrc 表示 视频 与 动画 来 源 文件 所 在 的 URL 地 址 ,其 他 标记 内 容 同 图 像 显 
视频 与 示 标 记 。start 二 fileopen 表示 Web 页 面 一 被 装 入 便 播放 ; start 二 onmouseover 表 
和 动画 | 示 当 鼠标 从 该 区 域 滑 过 时 才 播放 。Loop 表示 视频 或 动画 播放 的 重复 次 数 ,为 
标记 | infinite 或 为 负数 时 表示 无 限 循环 。 例 如 ， 
< IMG DYNSRC = "avideo. avi" HEIGHT = 200 WIDTH = 300 LOOP = infinite> 
< IMG DYNSRC = "animation. flc" HEIGHT = 20 WIDTH = 30 > 
标记 格式 为 : <BGSound SRC==url LOOP 王 nl BALANCE=n2 VOLUME=n3 > 
其 中 SRC 表示 声音 文件 所 在 的 URL 地 址 。Loop 表示 声音 循环 播放 的 次 数 , 当 为 
声音 处 “| infinite 或 为 负数 时 ,表示 无 限 循环 。BALANCE 表示 左右 喇叭 的 音量 均衡 度 , 大 
3 | 理 标记 | 小 在 一 10000 到 10000 之 间 , 为 0 时 ,左右 喇叭 音量 均衡 。VOLUME 表示 音量 的 
大 小 ,大 小 为 一 10000 到 0 之 间 ,为 0 时 ,表示 音量 最 大 。 例 如 : 
< BGSound SRC = " ieeec.mid" LOOP = infinite BALANCE= 0 VOLUME = 0> 
用 浏览 器 插件 来 播放 声音 的 方法 如 下 : 
< EMBED WIDTH = "128" HEIGHT = "128" SRC = "file:///C:/windows/ media/canyon， 
4 插件 标记 | mid" LOOP = false autostart = true mastersound HIDDEN = true> 
其 中 autostart 表示 页 面 一 装 和 人 即 开始 播放 ,hidden 表示 无 任何 播放 界面 出 现 。 要 
求 必须 事先 装 入 ActiveMovie 多 媒体 插件 才 可 播放 
ActiveX 是 微软 公司 开发 的 一 种 技术 或 者 说 是 一 种 编程 方法 、 一 种 标准 , 它 基 于 动 
态 数 据 交 换 DDE 技术 与 对 象 链接 与 嵌入 OLE 技术 。ActiveX 控件 是 一 种 特殊 的 
对 象 , 它 可 以 嵌入 在 网 页 中 以 便 实 现 多 种 功能 。 当 用 户 浏 览 到 包含 有 ActiveX 控 
件 的 网 页 时 ,如 果 本 系统 没有 提供 对 该 控件 的 支持 , 则 浏览 器 会 提示 下 载 该 控件 。 
下 载 后 的 控件 将 驻 留 在 计算 机 中 ,以 便 以 后 继续 使 用 。 在 网 页 中 嵌入 ActiveX 控 
件 应 使 用 object 标记 ,用 param 标记 指定 运行 参数 。 例如 用 ActiveX 控件 
ActiveMovie 播放 视频 的 方法 如 下 : 
< OBJECT CLASSID = "clsid: 05589FR1 ~ C356 — 11CE - BF01 - 00AA0055595A" WIDTH 
= 239 HEIGHT = 251> 
ActiveX < PARAM NAME = "Appearance" VALUE = "0"> 
5 控件 对 < PARAM NAME = "AutoStart" VALUE = "0"> 
象 标记 < PARAM NAME = "AllowChangeDisplayMode" VALUE = "—1"> 
< PARAM NAME = "DisplayBackColor" VALUE = "0"> 
< PARAM NAME = "DisplayForeColor" VALUE = "16777215"> 
< PARAM NAME = "EnableTracker" VALUE ="—1"> 
< PARAM NAME = "Filename" VALUE = "file:///C://windows/GLOBE. AVI"> 
< PARAM NAME = "FullScreenMode" VALUE = "0"> 
< PARAM NAME = "MovieWindowSize" VALUE = "0"> 
< PARAM NAME = "PlayCount" VALUE = "1"> 
< PARAM NAME = "ShowPositionControls" VALUE = "0"> 
< PARAM NAME = "ShowTracker" VALUE="—1"> 
</OBJECT > 
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运行 后 的 播放 页 面 如 图 3-6 所 示 。 需 要 说 明 的 是 通过 该 ActiveX 控件 还 可 播放 各 
种 声音 文件 ,只 需要 将 上 面 filename 的 参数 值 改 成 
声音 文件 即 可 ,可 以 置 AutoStart 的 参数 值 为 1 表 
示 一 装 人 页 面 就 开始 播放 ,将 width 和 height 的 值 
置 为 0, 播 放声 音 时 不 会 有 任何 界面 出 现 。 上 述 通 
过 ActiveX 控件 播放 的 方法 也 可 通过 浏览 器 插件 
方式 来 播放 ,方法 是 : 二 EMBED WIDTH 一 "128" 
HEIGHT="128" SRC="file:///C://windows/ 
GLOBE. AVI" LOOP = false autostart = true [EO 


hidden=false 这 。 又 如 播放 flash 动画 swf 文件 的 。 对 人 33 
ActiveX | 方法 如 下 : 3-6 播放 页 面 
控件 对 
象 标记 < OBJECT CLASSID = "clsid:D27CDB6E - RE6D - 11CF - 96B8 - 444553540000" jd = "flashobj1" 


codebase = "http://download. macromedia. com/ pub/ shockwave/cabs/flash/ swflash. cab# 
version = 6,0,40,0" BORDER = "0" WIDTH= "160" HEIGHT = "160"> 

< PARAM NAME = "movie" VALUE = "11. swf "> 

< PARAM NAME = "quality" VALUE = "High"> 

< EMBED SRC = " 11. swf " PLUGINSPAGE = " http://www. macromedia. com/go/ 
getflashplayer" TYPE = "application/x — shockwave - flash" NAME = "obj1l" WIDTH = 
"160" HEIGHT = "160"></OBJECT > 


object 标记 中 的 codebase 属性 指明 了 Flash 控件 下 载 地 址 。 如 果 用 户 浏览 页 
面 时 没有 Flash 控件 , 则 从 该 地 址 马上 下 载 。 要 在 网 页 中 使 用 ActiveX 控件 ,需要 
知道 classid 以 及 各 参数 的 使 用 。 很 多 工具 如 Visual Interdev 6.0、Dreamweaver 等 
都 可 通过 插入 或 拖拉 方式 来 选择 你 需要 的 控件 


【 例 3.6】 在 一 个 3X3 的 表格 的 中 间 显 示 一 张 图 片 。 


<! DOCTYPE HTML PUBLIC " - //W3C//DTD HTML 4.01 Transitional//EN" 

"http://www. w3. org/TR/html4/loose. dtd"> 

<HIML>< HEAD> 

<META http - equiv = "Content — Type" CONTENT = "text/html; CHARSET = gb2312"> 

<TITLE> HTML 文档 图 像 表格 标记 的 演示 效果 </TITLE ></HEAD> 

<BODY> 

< TABLE BORDER = 1 STYLE = "border - collapse: collapse" >< CAPTION > 表格 显示 图 片 </CAPTION> 

<TR><TD> 公 司 名 称 </TD ><TD> 图 片 </TD><TD> 备 注 </TD ></TR> 
<TR><TD> companyl </TD><TD>< img src= "adl. jpg"></TD><TD> 半 年 </TD ></TR> 

<TR><TD> company2 </TD >< TD > 无 </TD >< ID > 未 签约 </TD ></TR></TRBLE > 

</BODY></HTML> 


该 文档 的 显示 效果 如 图 3-7 所 示 。 
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当 HTm 文 着 图 划 、 表 格 标 记 的 全 诸 [e EE] 


表格 显示 图 片 
公司 名 称 图 片 备注 


companyl 


3-7 在 表格 中 央 显 示 图 片 


3.1.5 控件 标记 


控件 标记 包括 表单 标记 ,按钮 标记 、 文 本 框 、 文 本 区 域 . 复 选 框 .选项 按钮 选项 菜单 、 文 

件 域 . 分 组 框 等 标记 。 它 们 的 介绍 如 表 3-5 所 示 。 
表 3-5 控件 标记 

序 号 | 标 记 说 明 
表单 (Form) 用 于 从 用 户 ( 站 点 访问 者 ?收集 信息 ,然后 将 这 些 信 息 提交 给 服务 器 进 
行 处 理 。 表 单 中 可 以 包含 允许 用 户 进行 交互 的 各 种 控件 ,例如 文本 框 、 列 表 框 、 复 
选 框 和 单 选 按钮 等 。 用 户 在 表单 中 输入 或 选择 数据 之 后 将 其 提交 ,该 数据 就 会 送 
交 给 表单 处 理 程序 进行 处 理 。 表 单 的 使 用 包括 两 个 部 分 : 一 是 用 户 界 面 ,提供 用 
户 输入 数据 的 元 件 ; 二 是 处 理 程序 ,可 以 是 客户 端 程序 ,在 浏览 器 中 执行 ,也 可 以 


是 服务 器 处 理 程序 ,处 理 用 户 提交 的 数据 ,返回 结果 。 表 单 通过 FORM 标记 来 
定义 : 


<Form 属性 = " 值 "… 事件 = "代码 "> ……</Form> 


属性 : 

Name 二 表单 的 名 称 。 命 名 表单 后 ,可 以 使 用 脚本 语言 来 引用 或 控制 该 表单 
Method 二 表单 数据 传输 到 服务 器 的 方法 。 其 取 值 如 下 : post, 在 HTTP 请 求 中 嵌 
1 表单 ”| 人 表单 数据 ; get' 将 表单 数据 附加 到 请 求 该 页 的 URL 中。 注意: 若 要 使 用 get 方 
法 发 送 ,URL 的 长 度 应 限制 在 8192 个 字符 以 内 。 如 果 发 送 的 数据 量 太 大 ,数据 将 
被 截断 ,从 而 导致 意外 的 或 失败 的 处 理 结 果 。 此 外 ,在 发 送 用 户 名 和 密码 、 信 用 卡 
号 或 其 他 机 密 信息 时 ,不 要 使 用 get 方 法 ,而 应 使 用 post 方 法 

Action 二 接收 表单 数据 的 服务 器 端 程序 或 动态 网 页 的 URL 地 址 

Target 二 目标 窗口 。 其 取 值 如 下 : _blank, 在 未 命名 的 新 窗口 中 打开 目标 文档 ; 
_parent, 在 当前 文档 窗口 的 父 窗 口中 打开 目标 文档 ; _self, 在 提交 表单 所 使 用 的 窗 
口中 打开 目标 文档 ; _top, 在 当前 窗口 内 打开 目标 文档 ,确保 目标 文档 占用 整个 
窗口 

在 一 个 网 页 中 可 以 创建 多 个 表单 ,每 个 表单 都 可 以 包含 各 种 各 样 的 控件 ,例如 文本 
框 ` 单 选 按 钮 . 复 选 框 、 下 拉 莱 单 以 及 按钮 等 。 表 单 不 能 赃 套 使 用 

事件 : 

OnSubmit 二 提交 表单 时 调用 的 事件 处 理 程序 

OnReset = 重 置 表单 时 调用 的 事件 处 理 程序 
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续 表 
标 记 说 明 


使 用 Input 标记 可 以 在 表单 中 添加 3 种 类 型 的 按钮 : 提交 按钮 、 重 置 按钮 和 自 定义 
按钮 。 创 建 按钮 的 方法 如 下 : 


< Input Type = "submit | reset | button" 属性 = " 值 " … OnClick = "代码 "> 


属性 : 

Type 二 submit 创建 一 个 提交 按钮 。 在 表单 中 添加 提交 按钮 后 ,站 点 访问 者 就 可 
普通 以 在 提交 表单 时 ,将 表单 数据 (包括 提交 按钮 的 名 称 和 值 ) 以 ASCII 文本 形式 传送 
按钮 、 | 到 由 表单 的 Action 属性 指定 的 表单 处 理 程序 。 一 般 来 说 ,表单 中 必须 有 一 个 提交 
提交 | 按钮 

按钮 、 | Type = reset 创建 一 个 重 置 按 钮 。 单 击 该 按钮 时 ,将 删除 任何 已 经 输入 到 域 中 
复位 “| 的 文本 并 清除 所 做 的 任何 选择 。 但 是 ,如 果 框 中 含有 默认 文本 或 选项 为 默认 , 单 击 
按钮 重 置 按钮 将 会 恢复 这 些 设置 值 

Type 二 button 创建 一 个 自 定义 按钮 。 在 表单 中 添加 自 定义 按钮 时 ,为 了 赋予 按 
钮 某 种 操作 ,必须 为 该 按钮 编写 脚本 

Name 二 按钮 的 名 称 

Value 二 显示 在 按钮 上 的 标题 文本 

事件 : 

OnClick 三 单 击 按钮 执行 的 脚本 代码 


在 表单 中 添加 文本 框 可 以 获取 站 点 访问 者 提供 的 一 行 信息 。 创 建文 本 框 方法 
如 下 : 


< Input Type = "text" 属性 = " 值 "… 事件 = "代码 " …> 


属性 : 

Name 一 单行 文本 框 的 名 称 ,通过 它 可 以 在 脚本 中 引用 该 文本 框 控件 ; Value 一 文本 
框 的 值 ; DefaultValue = 文本 框 的 初始 值 ， Size = 文本 框 的 宽度 (字符 数 ); 
MaxLength 二 允许 在 文本 框 内 输入 的 最 大 字符 数 。 用 户 输入 的 字符 数 可 以 超过 
文本 框 的 宽度 ,这 时 系统 会 将 其 滚动 显示 ,但 输入 的 字符 数 不 能 超过 设置 的 最 大 字 
符 数 ; Form = 所 属 的 表单 (只 读 ) 。 当 type 一 "password" 时 ,用 户 输入 的 文本 以 * 
文本 框 | 呈现 ,可 用 于 输入 用 户 密码 


方法 : 

Click() , 单 击 该 文本 框 ; Focus() ,得 到 焦点 ; Blur() ,失去 焦点 ; Select() ,选择 文本 
框 的 内 容 

事件 : 


OnClick 一 单 击 该 文本 框 执行 的 代码 ; OnBlur 二 失去 焦点 执行 的 代码 ; OnChange 一 
内 容 变化 执行 的 代码 ; OnFocus = 得 到 焦点 执行 的 代码 ; OnSelect 二 选择 内 容 执 
行 的 代码 

例如 : 


用 户 名 : < Input Type = text Name = "nm" Value = ""> 
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续 表 
说 明 


文本 
区 域 


在 表单 中 添加 文本 区 域 可 以 接受 站 点 访问 者 输入 多 于 一 行 的 文本 。 创 建文 本 区 域 
方法 如 下 : 


< Textarea 属性 = " 值 "… 事件 = "代码 " …> 初 始 值 </Textarea > 


属性 : 

Name 二 滚动 文本 框 控件 的 名 称 ; Rows = 控件 的 高 度 ( 以 行为 单位 ); Cols = 控 
件 的 宽度 (以 字符 为 单位 ); ReadOnly: 滚动 文本 框 的 内 容 不 能 被 用 户 修改 

创建 多 行文 本 框 时 ,在 二 Textarea> 和 二 /Textarea 二 标记 之 间 输 入 的 文本 将 作为 
该 控件 的 初始 值 。 它 的 其 他 属性 、 方 法 和 相关 事件 与 单行 文本 框 基本 相同 。 当 提 
交 表单 时 ,该 域名 称 和 内 容 都 会 包含 在 表单 结果 中 


5 复 选 框 


在 表单 中 添加 复 选 框 可 以 让 站 点 访问 者 对 一 个 或 多 个 选项 进行 选择 。 创 建 复 选 框 
的 方法 如 下 : 


< Input Type = "checkbox" 属性 = " 值 " … 事件 = "代码 " …> 选项 文本 


属性 : 

Name 二 复 选 框 的 名 称 

Value 二 选中 时 提交 的 值 

Checked, 设 置 当 第 一 次 打开 表单 时 该 复 选 框 处 于 选中 状态 。 该 复 选 框 被 选中 时 ， 
值 为 true, 和 否则 为 false。 该 属性 是 可 选 的 

DefaultChecked ,判断 复 选 框 是 否定 义 了 Checked 属性 。 若 定义 了 Checked 属性 ， 
则 DefaultChecked 为 true, 否 则 为 false 

方法 : 

Focus() ,得 到 焦点 ; Blur() ,失去 焦点 ; Click() , 单 击 该 复 选 框 

事件 : 

OnFocus 二 得 到 焦点 执行 的 代码 ; OnBlur = 失去 焦点 执行 的 代码 ; OnClick = 
单 击 该 复 选 框 执行 的 代码 

当 提 交 表单 时 ,假如 复 选 框 被 选中 , 它 的 内 部 名 称 和 值 都 会 包含 在 表单 结果 中 。 否 
则 ,只 有 名 称 会 被 纳入 表单 结果 中 , 值 则 为 空白 

例如 : 


签字 笔 < Input Type = checkbox Name = "chl" Checked> 
钢笔 < Input Type = checkbox Name = "ch2"> 
圆珠笔 < Input Type = checkbox Name = "ch3"> 


选项 


在 表单 中 添加 选项 按钮 可 以 让 站 点 访问 者 从 一 组 选项 中 选择 其 中 之 一 。 在 一 组 单 
选 按钮 中 ,一 次 只 能 选择 一 个 。 创 建 选项 按钮 方法 如 下 : 


< Input Type = "radio" 属性 = " 值 " … 事件 = "代码 " …> 选项 文本 


属性 : 

Name 二 单 选 按钮 的 名 称 ,若干 个 名 称 相同 的 单 选 按钮 构成 一 个 控件 组 ,在 该 组 中 
只 能 选中 一 个 选项 ; Value 一 提交 时 的 值 ; Checked, 设 置 当 第 一 次 打开 表单 时 该 
单 选 按钮 处 于 选中 状态 。 该 属性 是 可 选 的 

单 选 按钮 的 方法 和 事件 与 复 选 框 基本 相同 。 当 提交 表单 时 ,该 单 选 按钮 组 名 称 和 
所 选取 的 单 选 按钮 指定 值 都 会 包含 在 表单 结果 中 ,如 果 没 有 任何 单 选 按钮 被 选取 ， 
组 名 称 会 被 纳入 表单 结果 中 , 值 则 为 空白 


号 
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续 表 


选项 
按钮 


例如 : 


< Input Type = radio Checked Name = kd Value= "教师 "> 教师 
< Input Type = radio Name = kd Value = "学 生 "> 学 生 

< Input Type = radio Name = kd Value = "公务 员 "> 公 务 员 

< Input Type = radio Name = kd Value = "医生 "> 医生 


选项 
菜单 


表单 中 的 选项 菜单 可 让 站 点 访问 者 从 列表 或 菜单 中 选择 选项 。 菜单 中 可 以 选择 一 
个 选项 ,也 可 以 设置 为 允许 作 多 重 选择 。 创 建 选项 菜单 方法 如 下 : 


< Select Name = " 值 " Size = " 值 " [Multiple]> 
< Option [Selected] Value = " 值 "> 选项 1 </Option> 
< Option [Selected] Value = " 值 "> 选项 2 </Option> 


</Select> 


属性 : 

Name 二 选项 菜单 控件 的 名 称 ; Size = 在 列表 中 一 次 可 以 看 到 的 选项 数目 (默认 
为 1) , 若 大 于 则 相当 于 列表 框 ; Multiple, 允许 作 多 项 选择 ;Selected = 该 选项 的 
初始 状态 为 选中 

当 提 交 表单 时 ,菜单 的 名 称 会 被 包含 在 表单 结果 中 ,并 且 其 后 有 一 份 所 有 选项 值 的 
列表 

例如 : 


<Html >< Head >< Title > 文件 域 示例 </Title></Head> 
<Body> 

< Form Action = "GetCourse.asp" Method = "post"> 

< Select Name = "课程 "> 

< Option Value = "计算 机 基础 ”Selected> 计 算 机 基础 </0ption> 
< Option Value= "C 语 言 程序 设计 "> C 语 言 程序 设计 </option> 
< Option Value = "数据 结构 "> 数据 结构 </option> 

< Option Value= "数据 库 原 理 "> 数据 库 原理 </Option> 

< Option Value = "C++ 程序 设计 "> C++ 程序 设计 </Option> 
</Select> 

</Form> 

</Body></Html > 


文件 域 


文件 域 由 一 个 文本 框 和 一 个 “浏览 ”按钮 组 成 ,用 户 既 可 以 在 文本 框 中 输入 文件 的 
路 径 和 文件 名 ,也 可 以 通过 单 击 “ 浏 览 ” 按 钮 从 磁盘 上 查找 和 选择 所 需 文件 。 文 件 
域 一 般 用 于 选择 文件 上 载 到 服务 器 。 创 建文 件 域 方 法 如 下 : 


< Input Type = "file" 属性 = " 值 "…> 
属性 ， 请 选择 文件 [alg. | 
Name 二 文件 域 的 名 称 ; Value 二 初始 文件 下 | ses | 

名 ; Size = 文件 名 输入 框 的 宽度 

一 个 文件 域 如 图 3-8 所 示 。 图 3-8 选择 文件 
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续 表 
序 号 | 标 记 说 明 
源 代码 如 下 : 
<Html >< Head >< Title > 文件 域 示 例 </Title></Head> 
<Body> 
< Form Action = "GetCourse. asp" Method = "post" enctype = "multipart/ form 
-data"> 
< Table Align = center BgColor = #D6D3CE Width = 368 > 
<Tr><Th ColSpan = 2 BgColor = #0034FF >< Font Color = # FFFFFF > 文件 域 
</Font></Th></Tr> 
8 文件 域 <Tr><Td Height = 52 Align = right > 请 选择 文件 : </Td> 
<Td Height = 52 >< Input Type = file Name = Fl Size= 16></Td></Tr> 
<Tr Align= center> 
<Td Height = 52 Align = right >< Input Type = submit Value = 提交 Name = 
btnSubmit ></Td> 
<Td Height = 52 >< Input Type = reset Value = 全 部 重 写 Name = btnReset > 
</Td></Tr> 
</Table ></Form></Body ></Html > 
为 了 能 使 服务 器 接收 到 选择 的 文件 ,表单 中 应 包含 enctype 属性 值 指定 提交 数据 的 格式 
可 以 使 用 FieldSet 标记 对 表单 控件 进行 分 组 ,从 而 将 表单 细 分 为 更 小 、 更 易于 管理 
的 部 分 。FieldSet 标记 必须 以 Legend 标记 开头 ,以 指定 控件 组 的 标题 ,在 Legend 
标记 之 后 可 以 跟 其 他 表单 控件 ,也 可 以 嵌 套 
FieldSet。 创 建 表单 控件 分 组 的 方法 如 下 : ms 
<FieldSet > | 
< Legend > 控件 组 标题 </Legend > 
组 内 表单 控件 到 | 当 
</FieldSet > 图 3.9 分 组 框 显示 效果 
例如 : 
< Html >< Head >< Title > 文件 域 示例 </Title></Head>< Body> 
< center > gnbsp; 
9 分 组 框 < fieldset style = "width: 300px; z - index: 103; left: 115px; position: 


absolute; top: 260px; background - color: #ff99cc;"> 

< legend> 用 户 登录 </legend> 

< form name = "login. asp" method = "post"> 

账号 : < input name = "UserName"></input ><br><br> 

密码 : < input type = "password" name = "UserPassword"></input ><br><br> 
< input type = " submit”value =" 登 录 " name = " Submit"></input > 
Snbsp; &nbsp; 

< input type = "reset" value = " 重 填 " name = "Reset"></input > 

</form> 

</fieldset > 

</Body ></Html > 


显示 效果 如 图 3-9 所 示 。 
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3.1.6 帧 标记 和 IFRAME 标记 
帧 标记 和 IFRAME 标记 的 介绍 如 表 3-6 所 示 。 

表 3-6， 帧 标记 和 IFRAME 标记 
序 号 | 标 记 说 明 
帧 技术 又 叫 框架 技术 。 迄 今 为 止 ,我 们 所 提 到 的 所 有 网 页 都 能 链接 到 其 他 网 页 ,但 
是 每 次 只 能 显示 一 个 网 页 ,为 了 能 够 在 同一 浏览 器 中 显示 多 个 页 面 , 则 必须 使 用 帧 
技术 。 为 了 说 明 一 个 HTML 文档 中 使 用 了 帧 技术 ,必须 在 文档 类 型 中 给 予 相 应 的 
说 明 ,该 文档 类 型 说 明 如 下 : 


<!DOCTYPE HTML PUBLIC " - //W3C//DTD HTML 4. 01 Frameset//EN" "http://www.w3. 
org/TR/htm14/loose. dtd"> 


帧 式 网 页 起 始 于 开始 标记 所 frameset> 。 帧 集 有 两 个 重要 属性 , 即 cols 属性 ( 列 属 
性 ) 和 rows 属性 ( 行 属性 ) ,其 中 cols 属性 给 出 了 帧 集 页 面 的 纵向 布局 ,而 rows 属 
性 则 给 出 了 帧 集 页 面 的 横向 布局 。 这 两 个 属性 会 指定 每 个 帧 的 宽度 ,或 像素 值 ,或 
所 占 屏 幕 的 百分比 。 例 如 二 frameset cols 二 "110, * "过 告诉 浏览 器 该 网 页 有 两 个 
帧 ,第 一 个 从 屏幕 左 侧 扩展 了 110 个 像素 点 ,第 二 个 帧 填充 了 屏幕 的 剩余 部 分 

帧 集 标记 只 说 明 在 一 个 浏览 器 中 可 以 有 多 少 个 页 面 ,但 是 每 个 页 面 该 如 何 表达 ,是 标记 
一 frameset> 无 法 实现 的 ,因此 在 一 frameset 宝 … 二 /frameset 二 内 必须 将 每 个 帧 的 内 容 
表达 出 来 。HTML 是 通过 在 二 frameset 二 … 一 /frameset 二 内 嵌 套 一 frame 二 来 实现 的 。 
帧 标记 一 frame 之 常用 的 格式 为 : 一 frame name 一 "main” src 一 "main. html" 之 

name 属性 是 标识 帧 ,而 src 则 表示 在 该 帧 中 建立 一 个 超 链 接 。 帧 标记 往往 与 下 面 
的 格式 一 起 使 用 : 


<a href = "link. htm]l", target = "main"> 


1 帧 标记 


其 作用 是 在 name 属性 为 "main" 的 帧 中 加 载 页 面 link. html 
而 二 noframes 之 … 到 /noframes 之 标记 对 也 是 放 在 二 frameset 之 … 到 /frameset 之 标 
记 对 之 间 ,用 来 在 那些 不 支持 帧 的 浏览 器 中 显示 文本 或 图 像 信 息 。 具 体 应 用 例子 
见 例 3-7 
Iframe 标记 ,又 叫 浮动 帧 标记 ,可 用 它 将 一 个 HTML 文档 嵌入 在 另 一 个 HTML 中 
显示 。 它 不 同 于 Frame 标记 ,frame 最 大 的 特征 是 所 引用 的 HTML 文件 不 是 与 另 
外 的 HTML 文件 相互 独立 显示 ,而 是 可 以 直接 嵌入 在 该 HTML 文件 中 ,与 这 个 
HTML 文件 内 容 相 互 融合 ,成 为 一 个 整体 ,另外 ,还 可 以 多 次 在 一 个 页 面 内 显示 同 
一 内 容 , 而 不 必 重 复写 内 容 ,一 个 形象 的 比喻 即 * 画 中 画 ? 电 视 。 

Iframe 标记 的 使 用 格式 是 : 
IFRAME 


2 < Iframe src = "URL" width = "x" height = "x" scrolling = "[OPTION]" frameborder 
标记 a 
= "x"> </iframe> 


src: 文件 的 路 径 , 既 可 是 HTML 文件 ,也 可 以 是 文本 、ASP 文件 等 。width、height: 
“ 画 中 画 ” 区 域 的 宽 与 高 。scrolling: 当 SRC 指定 的 HTML 文件 在 指定 的 区 域 显示 
不 完 时 的 滚动 选项 ,如 果 设 置 为 NO, 则 不 出 现 滚动 条 ; 如 为 Auto, 则 自动 出 现 滚 
动 条 ; 如 为 Yes, 则 显示 滚动 条 。FrameBorder: 区 域 边框 的 宽度 ,为 了 让 ”* 画 中 画 ” 
与 邻近 的 内 容 相 融合 ,常设 置 为 0 
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续 表 
序 号 | 标 记 说 明 


在 脚本 语言 与 对 象 层次 中 ,包含 Itrame 的 窗口 我 们 称 之 为 父 窗 体 ,而 浮动 帧 则 称 
为 子 窗 体 , 弄 清 这 两 者 的 关系 很 重要 ,必须 清楚 对 象 层次 ,才能 通过 程序 来 访问 并 
控制 窗 体 

Iframe 虽然 内 嵌 在 另 一 个 HTML 文件 中 ,但 它 保持 相对 的 独立 ,是 一 个 “独立 王 
国 ”, 在 HTML 中 的 特性 同样 适用 于 浮动 帧 中 。 通过 lframe 标记 ,可 将 那些 不 变 的 
内 容 以 Iframe 来 表示 ,这 样 ,不 必 重复 写 相同 的 内 容 , 这 有 点 像 程序 设计 中 的 过 程 
2 | 下 RAME | 或 函数 ,节省 了 很 多 繁琐 的 操作 。 它 使 页 面 的 修改 更 为 方便 ,不 必 因 为 版 式 的 调整 
标记 | 而 修改 每 个 页 面 ,只 需 修改 一 个 父 窗 体 的 版 式 即 可 了 。 例 如 ， 


< Iframe src = "frame. htm" width = "400" height = "200”scrolling = "auto" 
frameborder = "1"> </Iframe> 


有 一 点 要 注意 ,Nestscape 浏览 器 不 支持 Iframe 标记 。Iframe 的 具体 应 用 例子 请 见 
第 4 章 中 DHTML 综合 编程 案例 部 分 


【 例 3.7】 链接 标记 和 帧 标记 的 综合 应 用 。 
主 文件 framemain. html : 


<! DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.01 Frameset//EN" 
"http://www. w3. org/TR/htm14/1oose. dtd"> 
<html> 
<head> 
<title> HTML 文档 链接 标记 、 帧 标记 的 演示 效果 </title> 
</head> 
< frameset cols= "15% ,85%"> 

< frame src = "framel. html" scrolling= "no" name = "win001"> 

<frame src = "frame2. html" name = "win002"> 
</frameset > 
<noframes> 

Please use a Web browser such as IE3.0 orNetscape Navigator to view this page in frames! 

</noframes > 
</htm]l > 


文件 framel. html: 


<html> 

<head></head> 

<body><a href = "31. html" target = "win002"> 实 例 1</a><br><br> 
<a href = "32. html" target = "win002"> 实 例 2</a> 

</body> 

</html > 


该 HTML 文档 的 显示 效果 如 图 3-10 所 示 。 
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图 3-10 ”链接 标记 和 帧 标记 的 综合 使 用 效果 


3.1.7 HTML 5 介绍 


HTML 5 是 HTML 下 一 个 主要 的 修订 版 本 ,现在 仍 处 于 发 展 阶 段 。 目 标 是 取代 
HTML 4.0 标准 ,以 期 能 在 互联 网 应 用 迅速 发 展 的 时 候 , 使 网 络 标准 达到 符合 当代 的 网 络 
需求 。 广 义 论 及 HTML 5 时 ,实际 指 的 是 包括 HTML CSS 和 JavaScript 在 内 的 一 套 技术 

组 合 。 它 希望 能 够 减少 浏览 器 对 于 插件 和 富 互 联网 应 用 (Plug-in-based Rich Internet 
Application, RIA) ,如 Adobe Flash、Microsoft Silverlight 与 Oracle JavaFX 的 需求 ,并 且 提 
供 更 多 能 有 效 增加 网 络 应 用 的 标准 集 。 

具体 来 说 , HTML 5 添加 了 许多 新 的 语法 特性 ,其 中 包括 二 video 二 ,audio 二 和 
所 canvas 过 元素 ,同时 整合 了 SVG 内容。 这 些 元 素 是 为 了 更 容易 在 网 页 中 添加 和 处 理 多 媒 
体 和 图 片 内 容 而 添加 的 。 其 他 新 的 元 素 包 括 二 section 二 、 一 article 二 、 一 header 二 和 二 nav 二 , 则 
可 用 来 丰富 文档 的 数据 内 容 。 新 属性 的 添加 也 是 为 了 同样 的 目的 。 同 时 也 有 一 些 属 性 和 
元 素 被 移 除 掉 了 。 一 些 元 素 , 像 二 a>、 二 cite 二 和 二 menu 二 被 修改 .重新 定义 或 标准 化 。 
同时 应 用 程序 接口 API 和 文档 对 象 模型 DOM 成 为 HTML 5 中 的 基础 部 分 。HTML 5 
还 定义 了 处 理 非 法 文档 的 具体 细节 ,使 得 所 有 浏览 器 和 客户 端 程序 能 够 一 致 地 处 理 语 法 
错误 。 

HTML 5 具有 以 下 特性 。 

. 语义 特性 

HTML 5 赋予 网 页 更 好 的 意义 和 结构 。 更 加 丰富 的 标签 可 构建 对 程序 和 用 户 都 更 有 
价值 的 数据 驱动 。 

2. 本 地 存储 特性 

基于 HTML 5 开发 的 网 页 将 拥有 更 短 的 启动 时 间 、 更 快 的 联网 速度 ,这 
HTML 5 APP Cache 以 及 本 地 存储 功能 。 

3. 设备 兼容 特性 

HTML 5 为 网 页 应 用 开发 者 们 提供 了 更 多 功能 上 的 优化 选择 , 带 来 了 更 多 体验 功能 的 
优势 。HTML 5 提供 了 前 所 未 有 的 数据 与 应 用 接 入 开放 接口 ,使 外 部 应 用 可 以 与 浏览 器 内 
部 的 数据 直接 相连 ,例如 视频 影音 可 直接 与 麦克 风 及 摄像 头 相连 。 


BE 
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4. 连接 特性 

更 有 效 的 连接 工作 效率 ,使 得 基于 页 面 的 实时 聊天 、 更 快速 的 网 页 游戏 体验 、 更 优化 的 
在 线 交 流 得 以 实现 。HTML 5 拥有 更 有 效 的 服务 器 推送 技术 , Server-Sent Event 和 
WebSockets 就 是 其 中 的 两 个 特性 ,这 两 个 特性 能 够 帮助 我 们 实现 服务 器 将 数据 “推送 ”到 客 
户 端 的 功能 。 

5. 网 页 多 媒体 特性 

支持 网 页 端的 Audio .Video 等 多 媒体 功能 。 

6. 三 维 、 图 形 及 特效 特性 

基于 SVG、Canvas、WebGL 及 CSS 3 的 3D 功能 ,用 户 会 惊叹 于 在 浏览 器 中 所 呈现 的 惊 
人 视觉 效果 。 

7. 性 能 与 集成 特性 

没有 用 户 会 永远 等 待 你 的 “Loading”, HTML 5 通过 XMLHttpRequest2 等 技术 ,帮助 
Web 应 用 和 网 站 在 多 样 化 的 环境 中 更 快速 地 工作 。 

8. CSS 3 特性 

在 不 牺牲 性 能 和 请 义 结构 的 前 提 下 ,CSS 3 提供 了 更 多 的 风格 和 更 强 的 效果 。 此 外 , 较 
之 以 前 的 Web 排版 , Web 的 开放 字体 格式 也 提供 了 更 高 的 灵活 性 和 控制 性 。 

目前 ,支持 HTML 5 的 浏览 器 有 IE 10、Mozilla Firefox 16、Opera 12、Safari 6 .Google 
Chrome 等 。 


3.2 CSS 


CSS(Cascading Style Sheets, 层 码 样 式 单 ) 是 W3C 协会 为 弥补 HTML 在 显示 属性 设 
定 上 的 不 足 而 制定 的 一 套 扩展 样式 标准 。 早 在 1996 年 W3C 便 提 出 了 一 个 定义 CSS 的 草 
案 ,很 快 这 个 草案 就 成 为 一 个 被 广泛 采纳 的 标准 。 到 1998 年 ,W3C 又 在 原 有 草案 的 基础 
上 进行 了 扩展 ,建立 了 CSS 2 规范 , 它 不 仅 包括 了 原 有 的 表现 形式 标准 ,还 有 许多 增强 
功能 。 

CSS 重新 定义 了 HTML 中 原来 的 文字 显示 样式 ,并 增加 了 一 些 新 概念 ,如 : 类 、 层 等 ， 
还 可 以 处 理 文字 重叠 、 定 位 等 , 它 提供 了 更 丰富 的 样式 。 同 时 CSS 可 集中 进行 样式 管理 。 
允许 将 样式 定义 单独 存储 于 样式 文件 中 ,把 显示 的 内 容 和 样式 定义 分 离 ,便于 多 个 HTML 
文件 共享 。 一 个 HTML 文件 也 可 以 应 用 多 个 CSS 样式 文件 。 

CSS 是 一 种 制作 网 页 的 新 技术 ,现在 已 经 成 为 网 页 设计 必 不 可 少 的 工具 之 一 。 目 前 它 
的 最 新 版 本 是 CSS 3, 它 是 能 够 真正 做 到 网 页 表现 与 内 容 分 离 的 一 种 样式 设计 语言 。CSS 3 
现在 已 被 大 部 分 现代 浏览 器 支持 ,而 下 一 版 的 CSS 4 仍 在 开发 过 程 中 ,直至 现在 CSS 4 也 只 
有 极 少数 功能 被 部 分 浏览 器 支持 。 本 书 将 重点 介绍 被 InternetExplorer 完全 支持 的 CSS 2 
标准 的 部 分 内 容 。 
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3.2.1 CSS 的 特点 


我 们 前 面 学 习 了 HTML 语言 以 及 编写 网 页 的 基本 方法 ,并 注意 到 HTML 注重 的 是 内 
容 本 身 ,而 不 是 显示 方式 。 但 实际 上 ,网 页 作者 不 得 不 考虑 很 多 关于 网 页 布局 .排版 方面 的 
问题 ,以 提供 给 用 户 尽量 美观 . 易 读 的 网 页 。 

HTML 中 标记 和 文档 内 容 是 混 写 在 一 起 的 ,标记 只 是 以 特有 的 “二 ”和 “之 ”记号 来 区 
分 ,这 给 用 户 编写 .管理 和 维护 网 页 带 来 了 很 多 不 便 之 处 。 假 如 有 100 个 网 页 ,每 个 网 页 都 
包含 了 一 段 特 定格 式 的 文字 (比如 字体 为 宋体 、 绿 色 ) ,那么 一 旦 需要 对 显示 格式 作 修改 时 
(如 将 绿色 改 为 红色 ) ,就 可 能 需要 对 这 100 个 网 页 都 进行 一 遍 相同 的 修改 ,这 是 让 人 无 法 忍 
受 的 。 

使 用 CSS 可 以 很 方便 地 管理 显示 格式 方面 的 工作 ,首先 它 能 够 对 网 页 上 的 元 素 精确 地 
定位 ,让 网 页 设计 者 在 网 页 上 自由 控制 文字 、 图 片 使 它们 按 要 求 显示 ; 其 次 它 能 够 实现 把 网 
页 上 的 内 容 结 构 和 格式 控制 相 分 离 。 浏 览 者 想 要 看 的 是 网 页 上 的 内 容 结 构 , 而 为 了 让 浏览 
者 更 好 地 看 到 这 些 信息 ,就 要 通过 格式 控制 来 帮忙 。 内 容 结 构 和 格式 控制 相 分 离 ,使 得 网 页 
可 以 仅 由 内 容 构 成 ,而 将 所 有 网 页 的 格式 控制 指向 某 个 CSS 样式 表 文 件 。 这 样 就 带 来 两 方 
面 的 好 处 : 

(1) 简化 了 网 页 的 格式 代码 ,外 部 的 样式 表 还 可 被 浏览 器 保存 在 缓存 里 ,从 而 加 快 下 载 
显示 的 速度 。 

(2) 只 要 修改 保存 着 网 站 格式 的 CSS 样式 表 文 件 就 可 以 改变 整个 站 点 的 风格 特色 ,在 
修改 页 面 数量 庞大 的 站 点 时 ,显得 格外 有 用 。 和 避免 了 网 页 一 个 一 个 的 修改 ,大 大 减少 了 重复 
劳动 的 工作 量 。 

CSS 中 层 秋 的 意思 是 多 种 样式 可 应 用 于 一 个 单一 的 HTML 页 或 应 用 于 该 页 中 某 个 单 
一 的 HTML 标记 , 当 多 种 样式 应 用 于 同一 HTML 标记 时 ,浏览 器 便 会 根据 CSS 标准 中 定 
义 的 层 释 规则 来 决定 哪 一 种 样式 优先 。 不 同类 型 的 样式 设置 将 共同 应 用 ,而 相同 类 型 的 样 
式 设置 将 根据 优先 顺序 覆盖 ,这 就 是 层 琶 样式 表 的 由 来 。 在 网 页 制作 时 采用 CSS 技术 ,可 
以 有 效 地 对 页 面 的 布局 .字体 .颜色 .背景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 对 响应 
的 代码 做 一 些 简单 的 修改 ,就 可 以 改变 同一 页 面 的 不 同 部 分 ,或 者 不 同 网 页 的 外 观 和 
格式 。 

CSS 3 是 CSS 技术 的 升级 版 本 ,CSS 3 语言 开发 是 朝 着 模块 化 发 展 的 。 以 前 的 规范 作 
为 一 个 模块 实在 是 太 庞 大 而 且 比 较 复 杂 , 所 以 ,把 它 分 解 为 一 些小 的 模块 ,更 多 的 模块 也 被 
加 入 进来 。 这 些 模 块 包括 : 盒子 模型 .列表 模型 . 超 链 接 方式 .语言 模块 .背景 和 边框 文字 
特效 、 多 栏 布局 等 。 

CSS 3 具有 以 下 特性 : 

(1) 圆 角 矩形 ,对 应 属性 : border-radius。 

(2) 以 往 对 网 页 上 的 文字 加 特效 只 能 用 filter 属性 ,在 CSS 3 中 专门 制定 了 一 个 加 文字 
特效 的 属性 ,而 且 不 止 加 阴影 一 种 特效 效果 。 对 应 属性 : font-effect。 

(3) 丰富 了 链接 下 划 线 的 样式 ,以 往 的 下 划 线 都 是 直线 ,在 CSS 3 中 出 现 了 波浪 线 、 点 
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线 、 虚 线 等 ,更 可 对 下 划 线 的 颜色 和 位 置 进行 任意 改变 。( 还 有 对 应 上 划 线 和 中 横 线 的 样式 ， 
效果 与 下 划 线 类 似 。) 对 应 属性 : textrunderline-style, text-underline-color, text-underline- 
mode,textrunderline-position 。 

(4) 在 文字 下 我 们 经 常 加 几 个 点 或 打 个 圈 以 示 重 点 ,如 今 CSS 3 也 开始 加 入 了 这 项 功 
能 ,这 在 显示 某 些 特定 网 页 上 很 有 用 。 对 应 属性 : font-emphasize-style 和 font-emphasize- 
Position 。 

此 外 ,还 有 一 些 对 边框 .背景 ,文字 效果 颜色 等 进行 修改 的 新 属性 出 现 ,进一步 丰富 和 
发 展 了 CSS 的 功能 。 

CSS 3 将 完全 向 后 兼容 ,所 以 不 必 担 心 要 修改 现在 的 设计 来 让 它们 继续 运作 。 网 络 浏 
览 器 也 还 将 继续 支持 CSS 2。CSS 3 主要 带 来 的 影响 是 将 可 以 使 用 新 的 选择 器 和 属性 , 实 
现 新 的 设计 效果 ,而且 很 简单 就 可 以 设计 出 现在 的 设计 效果 。 


3.2.2 CSS 的 定义 


CSS 是 一 种 格式 化 网 页 的 标准 方法 , 它 就 颜色 .字体 .间隔 .定位 以 及 边 距 等 格式 提供 
了 几 十 种 属性 ,这 些 属 性 可 通过 style 应 用 于 HTML 标记 中 。 
一 个 样式 表 是 由 许多 样式 规则 组 成 的 ,用 来 控制 网 页 元 素 的 显示 方式 ,其 规则 的 形式 为 : 


选择 符 {属性 1: 值 1; 属性 2: 值 2; …} 


规则 由 选择 符 以 及 紧 跟 其 后 的 一 系列 “属性 : 值 * 对 组 成 ,所 有 “属性 : 值 ” 对 用 “()" 包 
括 , 各 “属性 : 值 ? 对 之 间 用 分 号 “;? 分 隔 。 比 如 p{color:red;font-size:20pt} 就 是 一 个 规则 ， 
其 中 p 是 选择 符 ,color:red、font-size:20pt 是 “属性 : 值 " 对 。 本 规则 表示 所 有 二 p 二 标记 中 
的 文字 颜色 为 红色 、 大 小 为 20 磅 。 如 果 属 性 的 值 是 多 个 单词 组 成 , 则 必须 在 值 上 加 引号 , 比 
如 字体 的 名 称 经 常 是 几 个 单词 的 组 合 : p {font-family: "sans serif"} 。 

选择 符 是 要 引用 样式 的 对 象 , 可 以 是 一 个 或 多 个 HTML 标记 (各 标记 之 间 用 逗号 分 
开 ) ,也 可 以 是 类 选择 符 ( 如 . text) \id 选择 符 或 上 下 文选 择 符 。 如 果 使 用 HTML 语言 中 的 
标记 名 , 称 此 规则 为 重 置 定义 ,也 就 是 说 重新 定义 了 某 些 标记 的 显示 样式 (比如 标记 p 的 默 
认 文 字 颜 色 为 黑色 ,在 上 面 的 规则 中 重新 定义 为 红色 ,那么 以 后 过 p 之 中 的 文字 就 显示 为 红 
色 )。 可 以 把 具有 相同 属性 和 值 设置 的 选择 符 组 合 起 来 书写 ,用 逗号 将 选择 符 分 开 , 这 样 可 
以 减少 样式 重复 定义 。 比 如 p,table{font-size:9pt) 效 果 完 全 等 效 于 : 

p{font - size:9pt} 

table{font - size:9pt} 

对 字体 而 言 ,9pt 相当 于 Word 中 小 5 号 字体 ,10pt 相当 于 Word 中 5 号 字体 。CSS 中 
常用 描述 长 度 的 单位 有 : cm( 厘 米 ) .in( 英 寸 ) mm( 毫 米 )、pc(picas, 派 卡 ,1 派 卡 王 12 点 )、 
pt( 点 ,1 点 三 1/72 英寸 ) .px( 像 素 )、%( 百 分 比 ,例如 150% 表 示 1. 5 倍 ) 、em( 当 前 字体 中 字 
母 M 的 宽度 ) .ex( 当 前 字体 中 字母 X 的 高 度 ) 。 

样式 定义 中 还 可 以 加 入 注释 来 说 明代 码 的 意思 :注释 有 利于 自己 或 别人 以 后 编辑 和 更 
改 代码 时 理解 代码 的 含义 。 在 浏览 器 中 ,注释 是 不 显示 的 。 格 式 为: / * 字符 串 * /。 
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【 例 3.8】 CSS 定义。 


<html> 

<head> 

<title> CSS 示例 </title> 

<meta http - equiv = "Content - Type" content = "text/html;charset = gb2312"> 
<! 一 样式 定义 开始 一 > 

<style type = "text/css"> 

hl{font - family: "隶书 ", "宋体 ";color: #ff8800} 
.text{font - family:" 宋 体 ";font - size:14pt;color:red} 
</style> 

<! -一 样式 定义 结束 -一 > 

</head> 

<body topmargin= 4> 

<hl > 一 个 CSS 示例 !</hl > 

< span class = "text"> 这 行文 字 应 是 红色 的 .</span> 
</body> 

</html > 


在 浏览 器 中 显示 结果 如 图 3-11 所 示 。 


图 3-11 CSS 示例 


3.2.3 CSS 中 的 选择 符 

CSS 中 有 6 种 选择 符 ,分 别 是 HTML 标记 .具有 上 下 文 关 系 的 HTML 标记 、 用 户 自 定 
义 类 选择 符 .用户 定义 的 ID 选择 符 、 虚 类 、 虚 元 素 。 分 别 说 明 如 下 。 

1. HTML 标记 类 选择 符 

即 直接 用 HTML 标记 或 HTML 元 素 名称 作 为 CSS 选择 符 , 例 如 ， 


td, input, select, body {font - family:Verdana; font 一 size:12px;} 
form, body {margin:0;padding:0;} 

select, body, textarea {background: # fff;font — size:12px;} 
select {font — size:13px;} 

textarea {width:540px; border:1px solid #718da6;} 

img {border:none} 

a {text - decoration:underline;cursor:pointer;} 

hl {color: #ff0000} 
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2. 具有 上 下 文 关 系 的 HTML 标记 类 选择 符 

如 果 我 们 定义 了 这 样 的 样式 规则 body {color: blue} , 则 网 页 中 所 有 的 文字 都 以 蓝 色 显 
示 ,除非 另外 指定 样式 或 格式 来 更 改 这 一 设 定 , 这 是 因为 body 标记 包含 了 所 有 其 他 标记 符 
和 内 容 。 如 果 我 们 要 为 位 于 某 个 元 素 内 的 元 素 设置 特 定 的 样式 规则 , 则 应 将 选择 符 指定 为 
具有 上 下 文 关系 的 HTML 标记 ,例如 ,如 果 只 想 使 位 于 hl 标记 符 的 b 标记 符 具 有 特定 的 
属性 ,应 使 用 的 格式 为 : 


hl b {color: blue} <! -- 注意: 元 素 之 间 以 空格 分 隔 --> 


这 表示 只 有 位 于 hl 标记 内 的 b 元 素 具有 蓝 色 属性 ,其 他 任何 b 元 素 保持 原 有 颜色 。 

【 例 3.9】 该 例 中 ,包含 在 div 内 有 一 个 input,div 和 input 之 间 具 有 上 下 文 关系 ; div 
内 有 span,span 内 有 b, 它 们 之 间 也 构成 了 上 下 文 关 系 。 实 际 上 这 种 上 下 文 关 系 可 以 幅 套 
任意 层次 。 用 div span b {color:yellow}) 表 示 设 置 div 标记 中 的 span 标记 中 的 b 元 素 用 黄 
色 显 示 。 


< html >< head >< title> CSS 选择 符 问题 </title> 
< style type = text/css> 
input {color: white;} 
div input {color:red} 
div span b {color:yellow} 
</style> 
</head><body> 
< input type = "text" value = "change me"> <br> 
<div> 
< input type = "text" value = "change me"> <br> 
<span> I'ma<b> good </b> student </span> 
</div> 
</body> </html > 


3. 用 户 定义 的 类 选择 符 

使 用 类 选择 符 能 够 对 相同 的 标记 分 类 并 定义 成 不 同 的 样式 。 定 义 类 选择 符 时 ,在 自 定 
义 类 的 名 称 前 面 加 一 个 点 号 。 假 如 你 想 要 两 个 不 同 的 段落 ,一 个 段落 向 右 对 齐 ,一 个 段落 居 
中 ,你 可 以 先 定义 两 个 类 : 


Pp.right {text ~ align: right} 
p. center {text ~ align: center} 


“. ”符号 后 面 的 right 和 center 为 类 名 。 类 的 名 称 可 以 是 用 户 自 定义 的 任意 英文 单词 
或 以 英文 开头 的 与 数字 的 组 合 , 一 般 以 其 功能 和 效果 简要 命名 。 如 果 要 用 在 不 同 的 段落 里 ， 
只 要 在 HTML 标记 里 加 入 前 面 定义 的 类 : 


<p class = "right"> 这 个 段落 向 右 对 齐 的 </p> 
<p class = "center"> 这 个 段落 是 居中 排列 的 </p> 
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用 户 定义 的 类 选择 符 的 一 般 格式 是 : 


selector. classname { property: value; -…} 


类 选择 符 还 有 一 种 用 法 ,在 选择 符 中 省 略 HTML 标记 名 ,这 样 可 以 把 几 个 不 同 的 元 素 
定义 成 相同 的 样式 。 例 如 : . center {text-align: center), 自 定义 center 类 选择 符 为 文字 居 
中 排列 。 这 样 可 以 不 限定 某 一 个 HTML 标记 ,而 将 其 应 用 到 任何 元 素 上 。 比 如 将 hl 元 素 
(标题 1 ) 和 p 元素 ( 段 落 ) 都 设 为 “center” 类 ,使 这 两 个 元 素 的 文字 居中 显示 : 


<hl class = "center"> 这 个 标题 是 居中 排列 的 </hl> 
<p class = "center"> 这 个 段落 也 是 居中 排列 的 </p> 


这 种 省 略 HTML 标记 的 类 选择 符 是 我 们 最 常用 的 CSS 方法 ,使 用 这 种 方法 ,我 们 可 以 
很 方便 地 在 任意 元 素 上 套用 预先 定义 好 的 类 样式 ,但 是 要 注意 ,前面 的 “. ”号 不 能 省 略 。 
【 例 3.10】 CSS 类 选择 符 示 例 。 


< html >< head ><title> CSS 类 选择 符 示 例 </title> 
< style type = "text/css"> 
机 
Pp. English{font ~ family:"Times New Roman" ;color:blue} 
p.Chinese{font - family:" 幼 圆 ";font - size:20pt} 
,phone{ color:blue} 
一 三 演 
</style></head> 
<body> 
<p class = English> www. cqu. edu.cn</p> 
<p class = Chinese > 重庆 大 学 </p> 
<p class = phone > 20824812 </p> 
</body> 
</html > 


在 浏览 器 中 显示 结果 如 图 3-12 所 示 。 
4. ID 选择 符 
用 户 定义 的 ID 选择 符 的 一 般 格 式 是 : 


# IDname { property: value; …} 


Ditcsssszhm 辐 ||?|[X| soooe 


» 


其 中 IDname 为 某 个 标记 ID 属性 的 值 。ID 
选择 符 的 用 途 及 概念 和 类 选择 符 相 似 , 不 同 之 处 
在 于 同一 个 ID 选择 符 样式 只 能 在 HTML 文件 
内 被 应 用 一 次 ,而 类 选择 符 样 式 则 可 以 多 次 被 应 
用 ,也 就 是 说 ,如 果 有 些 较 特 别 的 标记 需要 应 用 
较为 特殊 的 样式 , 则 建议 使 用 ID 选择 符 。 在 定 星 我 的 电 及 加 100% | 
义 ID 选择 符 的 时 候 用 “# ”号 开头 而 不 是 “. "号 。 国生 这 类 填 捧 罕 东 出 


20824812 
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【 例 3.11】 ID 选择 符 示 例 。 


< html> 
<head><title> CSS ID 使 用 示例 </title> 
< style type = "text/css"> 
<! -一 
#English {font - family:"Times New Roman" ;color:blue} 
# Chinese {font - family:" 幼 圆 "} 
i 
</style></head> 
<body> 
<hl id= "English"> www. cqu.edu.cn</hl > 
<h2 id= "H2_1"> www. cqu.edu. cn</h2> 
<hl id= "Chinese"> 重 庆 大 学 </hl > 
<h2 id= "H2_2"> 重 庆 大 学 </h2> 
</body></html > 


在 浏览 器 中 显示 结果 如 图 3-13 所 示 。 

例 3.11 中 HTML 标记 若 引 用 相同 的 ID 
属性 , 则 会 给 用 脚本 语言 操控 该 元 素 带 来 麻烦 。 ee [eo 
同一 个 # English 选择 符 同时 应 用 到 <hl 及 | 立交 男 Bes 基 cj 仿 ” “ 
二 h2 二 标记 ,可 以 正常 显示 ,这 是 因为 浏览 器 在 
ID 选择 符 这 部 分 并 没有 完全 遵循 W3C 的 规格 | www.cqu.edu.cn 
建议 书 , 结 果 ID 选择 符 和 类 选择 符 的 用 法 几乎 
相同 。 

5, 虚 类 


Www.cqu.edu.cn 
重庆 大 学 


虚 类 可 以 看 做 是 一 种 特殊 的 类 选择 符 ,是 “| 重庆 大 学 
能 被 支持 CSS 的 浏览 器 自动 识别 的 特殊 选择 | 
符 。 虚 类 主要 针对 超 链接 a 标记 符 , 可 以 为 超 
链接 定义 不 同 状态 下 的 不 同样 式 效果 。 

虚 类 的 形式 如 下 ， 


图 3-13 ID 选择 符 使 用 示例 


选择 符 : 虚 类 { property: value; …} 


定义 虚 类 的 方法 和 常规 类 很 相似 ,但 有 两 点 不 同 : 一 是 连接 符 是 冒号 而 不 是 句点 号 ; 
二 是 虚 类 有 预先 定义 好 的 名 称 ,而 不 能 随便 取 名 。 这 里 仅 以 虚 类 中 最 常见 的 a 虚 类 为 例 ,a 
虚 类 可 以 指定 超 链接 标记 a 以 不 同 的 方式 显示 链接 ,也 就 是 链接 可 处 在 4 种 不 同 的 状态 下 : 
link ,visited \active\hover[ 分 别 代 表 未 访问 的 链接 .已 访问 的 链接 、 活 动 链接 ( 即 单 击 链接 
后 )、 鼠 标 停留 在 链接 上 ]。 可 以 把 它们 分 别 定 义 为 不 同 的 效果 ,如 例 3. 12 所 示 。 

【 例 3.12】 CSS 虚 类 示例 。 
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<html >< head ><title> CSS 伪 类 示例 </title> 

< style type = "text/css"> 

a:link {font - size: 18pt; font - family: 隶 书 ; text - decoration:none} /* 未 访问 的 链接 */ 
a:visited {font — size: 18pt;font - family: 宋 体 ;text - decoration:1ine— through} 

/* 已 访问 链接 * / 

a:hover {font - size: 18pt; font - family: 黑 体 ;text - decoration:overline} /* 鼠标 在 链接 上 * / 
a:active {font — size:18pt; font - family: 幼 圆 ; text - decoration:underline} 

/* 活 动 链接 * / 

</style></head> 

<body> 

<a href ="#"> 软 件 学 院 </a> 

</body></html> 


在 浏览 器 中 显示 结果 如 图 3-14 所 示 。 

在 例 3. 12 中 ,这 个 链接 未 访问 时 的 字体 是 隶书 且 无 下 划 线 ; 软件 学 院 GER 
访问 后 是 宋体 ,并 打上 了 删除 线 ; 单 击 变 成 活动 链接 时 字体 为 幼 陵 件 学 院 二 RE 
圆 并 有 下 划 线 ; 鼠标 在 链接 上 时 为 黑体 和 上 划 线 。 f 

值得 注意 的 是 ,有 时 这 个 链接 访问 前 鼠标 指向 链接 有 效果 ， | 软件 学 院 EB 
而 访问 链接 后 鼠标 再 次 指向 链接 时 却 无 效果 了 。 这 是 因为 你 把 
a:hover 放 在 了 a:visited 的 前 面 , 这 样 的 话 由 于 后 面 的 优先 级 
高 , 当 访 问 链接 后 就 忽略 了 a:hover 的 效果 。 所 以 根据 层 释 顺序 ,在 定义 这 些 链接 样式 时 ， 
一 定 要 按照 a:link、a:visited、a:hover、a:active 的 顺序 书写 。 

还 可 以 将 伪 类 和 类 选择 符 及 其 他 选择 符 组 合 起 来 使 用 ,其 形式 如 下 : 


图 3-14 虚 类 示例 


选择 符 .类 : 伪 类 { property: value; …} 


这 样 就 可 以 在 同一 个 页 面 中 做 出 几 组 不 同 的 链接 效果 了 。 
【 例 3. 13〗 CSS 虚 类 和 类 选择 符 组 合 使 用 。 设 计 两 种 链接 样式 ,可 以 定义 一 组 链接 为 
红色 ,访问 后 为 蓝 色 ; 另 一 组 为 绿色 ,访问 后 为 黄色 。 


< htm]l >< head > 

< style type = "text/css"> 

a.myred:link {color: #3FF0000; text - decoration: underline:} 
a. myred:visited {color: #30000FF; text — decoration: none:} 
a. myblue:link {color: #00FF00; text— decoration: none; } 

a. myblue:visited {color: #FFOOFF; text - decoration: underline;} 
</style></head> 

<body> 

<a class = "myred" href = "#"> 这 是 第 一 组 链接 </a> 

<a class = "myblue" href ="#"> 这 是 第 二 组 链接 </a> 
</body></html> 


6. 虚 元 素 
在 CSS 中 有 两 个 特殊 的 选择 符 , 用 于 p、div、span 等 块 级 元 素 的 首 字 母 和 首 行 效果 , 它 
们 是 : first-letter 和 first-line。 不 过 有 些 浏览 器 不 支持 这 两 个 虚 元 素 。 它 们 的 格式 为 : 
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选择 符 : first- letter { property: value; …} 
选择 符 : first- line { property: value; …} 
选择 符 .类 : first - letter { property: value; …} 
选择 符 .类 : first- line { property: value; …} 


【 例 3.14】 CSS 虚 元 素 示例 。 显 示 效 果 如 图 3-15 所 示 。 


<html >< head> 

<style type = "text/css"> 

P:first ~ letter {font — size:200% ;float:left;} 

P:first ~ line {color:blue;} 

div.odd:first- letter { font - family: 黑体 ;font - size:30pt;} 
</style></head> 

<body><p> 

在 Css 中 有 两 个 特殊 的 选择 符 ,< br > 用 于 文本 段 的 首 字母 和 首 行 效果 < br > 
有 些 浏览 器 不 支持 这 两 个 虚 元 素 </p> 

<Div class = "odd"> 

前 面 我 们 了 解 了 CSS 的 语法 ,但 要 想 在 浏览 器 中 显示 出 效果 ,< br > 
就 要 让 浏览 器 识别 并 调用 样式 表 , 当 浏 览 器 读 取 样式 表 时 ,</Div> 
</body></html > 


也 可 在 样式 中 定义 span {font-size:200%), 然 有 
后 在 需要 的 位 置 应 用 该 样式 来 实现 首 字母 效果 , 例 | 
如 “一 p 之 过 span> 前 过 /span> 面 我 们 了 解 了 CSS | 前 枉 OTWTcsssts， 但 要 想 在 浏览 器 中 显示 出 效果 ， 
的 语法 二 /p 全 "可 以 达到 同样 的 效果 。 让 浏览 吕 识 别 并 调用 样式 天 ， 当 浏览 总 取 样式 表 对， 


3.2.4 CSS 的 使 用 方式 


前 面 介绍 了 CSS 的 语法 ,但 要 在 浏览 器 中 显示 出 效果 ,就 要 让 浏览 器 识别 并 调用 样式 
表 。 当 浏览 器 读 取样 式 表 时 ,要 依照 文本 格式 来 读 。 为 网 页 添加 样式 表 的 方法 有 4 种 : 链 
入 外 部 样式 表 、 导 入 外 部 样式 表 、 联 入 样式 表 和 内 联 样式 。 其 中 联 入 样式 表 和 内 联 样式 是 将 
CSS 的 功能 组 合 于 HTML 文件 之 内 ,而 链接 及 导入 外 部 样式 表 则 是 将 CSS 功能 以 文件 方 
式 独立 于 HTML 文件 之 外 ,然后 再 通过 链接 或 导入 的 方式 将 HTML 文件 和 CSS 文件 链接 
在 一 起 。 

1. 链 入 外 部 样式 表 

链 入 外 部 样式 表 是 把 样式 表 保 存 为 一 个 CSS 文件, 在 HTML 的 头 信 息 标识 符 二 head 二 里 
添加 二 link 二 标记 链接 到 这 个 CSS 文件 即 可 使 用 。 

【 例 3. 15】 链 入 外 部 样式 表示 例 。 

先 将 样式 定义 存放 在 文件 mystyle. css 中 ,包含 如 下 内 容 : 


图 3-15 CSS 虚 元 素 示例 效果 


hi{font - family:" 素 书 ", "宋体 ";color: #ff8800} 
p{background - color:yellow;color: # 000000} 
. mytext{font - family:" 宋 体 ";font - size:14pt;color:red} 


css5. htm 引用 该 样式 表 : 
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<html> 

< head >< title > 链接 样式 表 CSS 示例 </title> 

< link rel = "stylesheet" type = "text/css" href = mystyle.css" media = screen></head> 
<body topmargin = 4> 

<hl > 这 是 一 个 链接 样式 CSS 示例 !</hl > 

< span class = "mytext"> 这 行文 字 应 是 红色 的 。</span> 

<p> 这 一 段 底 色 应 是 黄色 。</p> 

</body></html > 


在 浏览 器 中 显示 结果 如 图 3-16 所 示 。 


链接 样式 表 CSS5 示 例 - Windows Internet Explorer 
FO- 七 Di\cssi4-6.htm 靖 ||##||XX| |5o 


宽 安居 外 接 衬 式 表 cs5 示 例 一 | 一 | 丛 - 攻 
这 是 一 个 链接 样式 C99 示 例 ! 
这 行文 字 应 是 红色 的 。 


这 一 段 底 色 应 是 黄色 。 


是 我 的 电脑 


3-16 ”链接 样式 表示 例 


外 部 样式 表 不 能 含有 任何 像 二 head 二 或 二 style 二 这 样 的 HTML 标记 ,仅仅 由 样式 规 
则 或 声明 组 成 ,并 且 只 能 以 . css 为 扩展 名 。 

< 二 link 二 标记 放置 在 HTML 文档 头 部 ,属性 主要 有 rel、href、type、media。 

rel 属性 表明 样式 表 将 以 何 种 方式 与 HTML 文档 结合 。 一 般 取 值 stylesheet ,指定 一 个 
外 部 的 样式 表 。href 属性 指出 CSS 文件 的 地 址 ,如 果 样 式 文件 和 HTML 文件 不 是 放 在 同 
一 路 径 下 , 则 要 在 href 里 加 上 完整 路 径 。type 属性 指出 样式 类 别 , 通 常 取 值 为 text/css。 
media 是 可 选 的 属性 ,表示 使 用 样式 表 的 网 页 将 用 什么 媒体 输出 , 取 值 范围 包括 : screen( 默 
认 ) ,输出 到 计算 机 屏幕 ; print ,输出 到 打印 机 ; projection ,输出 到 投影 仪 等 。 

一 个 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 面 。 当 你 改变 这 个 样式 表 文 件 时 ,所 有 页 面 的 
样式 都 随 之 而 改变 。 在 制作 大 量 相同 样式 页 面 的 网 站 时 ,非常 有 用 ,不 仅 减少 了 重复 的 工作 
量 , 而 且 有 利于 以 后 的 修改 编辑。 同时 ,大 多 数 浏览 器 会 保存 外 部 样式 表 在 缓冲 区 ,从 而 浏 
览 时 可 减少 重复 下 载 代码 ,避免 展示 网 页 时 的 延迟 。 

2. 导入 外 部 样式 表 

导入 外 部 样式 表 是 指 在 HTML 文件 头 部 的 过 style>> … 志 /style> 标 记 之 间 ,利用 CSS 
的 @import 声明 引入 外 部 样式 表 。 

【 例 3.16】 导入 外 部 样式 表示 例 。 


<html> 
<head><title> 导 人 外 部 样式 表 CSS 示例 </title> 
< style type = "text/css"> 

<! -—@import "mystyle.css"; ——> 
h2 {font - family:" 素 书 ", "宋体 ";color:blue} 
</style> 
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< head> 

<body topmargin = 4> 

<hl > 这 是 一 个 导 和 外 部 样式 CSS 示例 !</hl > 

< span class = "text"> 这 行文 字 应 是 红色 的 。</span> 
<h2 > 这 行文 字 应 是 蓝 色 的 。</h2 > 

<p> 这 一 段 底 色 应 是 黄色 。</p> 

</body></html > 


在 浏览 器 中 显示 结果 如 图 3-17 所 示 。 


太 导 入 外 部 样式 表 CSS 示 例 - Windows Internet Explorer 
SO- 车 ovcscszhm 图 后 [xs 


六 安 后 FESASIESI 个 - 
这 是 一 个 导入 外 部 样式 CSS 示 例 ! 


这 行文 字 应 是 红色 的 。 


这 行文 字 应 是 蓝 色 的 。 
这 一 段 底 色 应 是 黄色 。 


图 3-17 导入 外 部 样式 表示 例 


@import "mystyle. css" 表 示 导 入 mystyle. css 样式 表 , 注 意 使 用 时 外 部 样式 表 的 路 
径 。 这 和 链 入 样式 表 的 方法 很 相似 ,但 导入 外 部 样式 表 输 入 方式 更 有 优势 。 因 为 除了 可 导 
入 外 部 样式 外 ,还 可 添加 本 页 面 的 其 他 样式 。 注 意 : @import 声明 必须 放 在 样式 表 的 开始 
部 分 ,其 他 CSS 规则 应 仍然 包括 在 style 元 素 中 。 

3. 联 入 样式 表 

利用 一 style 之 标记 将 样式 表 联 入 HTML 文件 的 头 部 。 前 面 的 例子 大 都 采用 这 种 
方法 。 

【 例 3.17】 联 入 样式 表示 例 。 


<head> 

< style type = "text/css"> 

1 

hr {color: sienna} 

Pp {margin— left: 20px} 

body {background - image: url("images/back40. gif")} 
</style> 

</head> 


style 元 素 放 在 文档 的 head 部 分 。 必 需 的 type 属性 用 于 指出 样式 类 别 ,通常 取 值 为 
text/css。 有 些 低 版 本 的 浏览 器 不 能 识别 style 标记 ,这 意味 着 低 版 本 的 浏览 器 会 忽略 style 
标记 里 的 内 容 , 直 接 以 源 代码 的 方式 在 网 页 上 显示 我 们 设置 的 样式 表 。 为 了 避免 这 样 的 情 
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况 发 生 ,我 们 用 加 HTML 注释 的 方式 (二 ! 一 注释 -二 ) 隐 藏 内 容 而 不 让 它 显示 , 像 上 述 例子 
那样 。 联 入 样式 表 的 作用 范围 是 本 HTML 文件 。 

4. 内 联 样式 

内 联 样式 是 混合 在 HTML 标记 里 使 用 的 ,用 这 种 方法 ,可 以 很 简单 地 对 某 个 元 素 单 独 
定义 样式 , 它 是 连接 样式 和 HTML 标记 的 最 简单 的 方法 。 内 联 样式 的 使 用 即 直接 在 
HTML 标记 里 加 入 style 参数 ,而 style 参数 的 内 容 就 是 CSS 的 属性 和 值 。 

【 例 3.18】 内 联 样式 表示 例 。 


<hl style= "font - family: "隶书 "，' 宋 体 ';color: #ff8800> 这 是 一 个 CSS 示例 !</hl > 
<p style = "color:red;background - color:yellow" > 这 一 段 底 色 应 是 黄色 。</p> 
<body style = "font - family: ' 宋 体 ';font - size:14pt" > 


此 时 ,样式 定义 的 作用 范围 仅 限于 此 标记 范围 之 内 。style 属性 是 随 CSS 扩展 出 来 的 。 
它 可 以 应 用 于 任意 body 元 素 (包括 body 本 身 ) ,除了 basefont、param 和 script。 还 应 注意 ， 
若 要 在 一 个 HTML 文件 中 使 用 内 联 样式 ,可 以 在 文件 头 部 对 整个 文档 进行 单独 的 样式 表 
语言 声明 , 即 : 

<meta http— equiv = "Content - Type" content = "text/css"> 

内 联 样式 向 标记 中 添加 太 多 属性 及 内 容 , 因 此 对 于 网 页 设计 者 来 说 很 难 维护 ,更 难 阅 
读 。 而 且 由 于 它 只 对 局 部 起 作用 ,因此 必须 对 所 有 需要 的 标签 都 作 设置 ,这样 就 失去 了 CSS 
在 控制 页 面 布局 方面 的 优势 。 所 以 ,内 联 样式 主要 用 于 样式 仅 适 用 于 单个 页 面 的 情况 ,应 尽 
量 减 少 使 用 内 联 样式 ,而 采用 其 他 样式 。 

5. 多 重 样 式 表 的 又 加 

有 时 会 遇 到 这 样 一 种 情况 : 几 个 不 同 的 样式 使 用 了 同一 个 选择 器 ,此 时 CSS 会 对 各 属 
性 值 进 行 释 加 处 理 , 遇 到 冲突 的 地 方 会 以 最 后 定义 的 为 准 。 

【 例 3.19】 多 重 样 式 表 的 又 加 示例 。 

我 们 首先 链 入 一 个 外 部 样式 表 , 其 中 定义 了 h3 选择 符 的 colortext-align 和 font-size 
属性 : 

h3 {color: red;text - align: left;font— size: 8pt;} 
然后 在 内 部 样式 表 里 也 定义 h3 选择 符 的 text-align 和 font-size 属性 : 

h3 {text - align: right; font - size: 20pt;} 
那么 这 个 页 面倒 加 后 的 样式 就 是 : 

color: red; text ~ align: right; font — size: 20pt; 
即 标题 3 的 文字 颜色 为 红色 ; 向 右 对 齐 ; 尺寸 为 20 号 字 。 外 部 样式 表 里 的 字体 颜色 设置 保 
留 了 下 来 ,而 对 齐 方式 和 字体 尺寸 都 有 定义 ,按照 后 定义 优先 的 原则 。 

依照 后 定义 优先 的 原则 ,优先 级 最 高 的 是 内 联 样式 , 联 入 样式 表 高 于 导入 外 部 样式 表 ， 
链 入 的 外 部 样式 表 和 联 入 样式 表 之 间 则 是 最 后 定义 的 优先 级 高 。 
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3.2.5 用 CSS 控制 Web 元 素 的 显示 外 观 


CSS 可 以 通过 字体 属性 .颜色 及 背景 属性 ,文本 属性 、 方 框 属性 .分 类 属性 和 定位 属性 
等 方式 控制 Web 元 素 的 显示 外 观 。 在 Web 开发 中 可 以 通过 很 多 工具 来 自动 生成 样式 表 ， 
不 需要 记忆 复杂 的 样式 名 称 , 但 你 必须 对 样式 名 称 有 所 了 解 ,只 有 这 样 你 才 可 以 在 自动 生成 
的 样式 单 上 进行 修改 。 

1. 控制 文字 字体 属性 

控制 文字 字体 属性 包括 字体 (font-family) 、 字 号 (font-size) .字体 风格 (font-style) .字体 
加 粗 (font-weight) ,字体 变化 (font-variant) 及 字体 综合 设置 (font) 属 性 。 

2. 文本 属性 

设置 文字 之 间 的 显示 特性 ,包括 字符 间隔 、 文 本 修饰 .大 小 写 转换 ,文本 横向 排列 、 文 本 
纵向 排列 .文本 缩 排行 高 。 

1) 字符 间隔 (letter-spacing) 

设 定 字符 之 间 的 间距 。 基 本 格式 : letter-spacing: 参数 。 

2) 文本 修饰 (text-decoration) 

文本 修饰 的 主要 用 途 是 改变 浏览 器 显示 文字 链接 时 的 下 划 线 。 

基本 格式 如 下 :text-decoration: 参数 。 

参数 取 值 : underline, 为 文字 加 下 划 线 ; overline, 为 文字 加 上 划 线 ; line-through ,为 文 
字 加 删除 线 ; blink ,使 文字 闪烁 ; none, 不 显示 上 述 任何 效果 。 

【 例 3.20】 用 CSS 控制 文本 显示 示例 。 


< htm]l > 

<head>< title > 文本 修饰 </title> 

< style type = "text/css"> 

1 ee 

. stylel{text - decoration: underline overline line -through blink} 

sa 

</style></head> 

<body>< span class = "stylel"> 给 文字 加 上 划 线 、 下划线 .删除 线 和 闪烁 .</span> 
</body></html > 


在 浏览 器 中 显示 结果 如 图 3-18 所 示 。 


EE 旺 我 的 电脑 


图 3-18 用 CSS 控制 文本 显示 
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3) 大 小 写 转换 (textrtransform) 

文字 大 小 写 转换 使 网 页 的 设计 者 不 用 在 输入 文字 时 就 完成 文字 大 写 ,而 可 以 在 输入 完 
毕 后 ,再 根据 需要 对 局 部 的 文字 设置 大 小 写 。 

基本 格式 如 下 : text-transform: 参数 。 

参数 取 值 : uppercase, 所 有 文字 大 写 显示 ; lowercase, 所 有 文字 小 写 显 示 ; capitalize， 
每 个 单词 的 头 字 母 大 写 显示 ; none, 不 继承 母体 的 文字 变形 参数 。 

注意 : 继承 是 指 HTML 的 标识 符 对 于 包含 自己 的 标识 符 的 参数 会 继承 下 来 。 

4) 文本 横向 排列 (text-align) 

文本 水 平 对 齐 可 以 控制 文本 的 水 平 对 齐 方式 ,而 且 并 不 仅仅 限于 文字 内 容 , 也 包括 设置 
图 片 .影像 资料 的 对 齐 方式 。 

基本 格式 : text-align: 参数 。 

参数 的 取 值 : left, 左 对 齐 ; right, 右 对 齐 ; center, 居 中 对 齐 ; justify, 相 对 左右 对 齐 。 

但 需要 注意 的 是 ,textalign 是 块 级 属性 ,只 能 用 于 二 p 二 二 blockquote 二 二 二 、 
<hl> 一 二 h7 之 等 标识 符 里 。 

5) 文本 纵向 排列 (vertical-align) 

文本 的 垂直 对 齐 应 当 是 相对 于 文本 母体 的 位 置 而 言 的 ,不 是 指 文本 在 网 页 里 垂直 对 齐 。 
比如 说 ,表格 的 单元 格 里 一 段 文本 设置 垂直 居中 ,文本 将 在 单元 格 的 正中 显示 ,而 不 是 整个 
网 页 的 正中 。 

基本 格式 如 下 : vertical-align: 参数 。 

参数 取 值 : top, 顶 对 齐 ; bottom, 底 对 齐 ; text-top, 相 对 文本 顶 对 齐 ; text-bottom, 相 
对 文本 底 对 齐 ; baseline, 基 准 线 对 齐 ; middle, 中 心 对 齐 ; sub, 以 下 标的 形式 显示 ; super， 
以 上 标的 形式 显示 。 

6) 文本 缩 排 (text-indent) 

文本 缩 进 可 以 使 文本 在 相对 默认 值 较 窗 的 区 域 里 显示 ,主要 用 于 中 文 版 式 的 首 行 缩 进 ， 
或 是 将 大 段 的 引用 文本 和 备注 做 成 缩 进 的 格式 。 

基本 格式 如 下 : text-indent: 缩 进 距离 。 

缩 进 距离 取 值 : 带 长 度 单位 的 数字 ; 比例 关系 。 

需 注意 ,text-indent 也 是 块 级 属性 ,只 能 用 于 二 p 二 .二 blockquote 二 .一 ul 二 .一 hl 二 一 
去 h7 二 等 标识 符 里 。 

7) 行 高 (line-height) 

行 高 是 指 上 下 两 行 基准 线 之 间 的 垂直 距离 。 

基本 格式 如 下 : line-height: 行 间距 离 。 

行 间 距离 取 值 : @ 不 带 单位 的 数字 ,以 1 为 基数 ,相当 于 比例 关系 的 100%。@ 带 长 度 
单位 的 数字 ,以 具体 的 单位 为 准 。 回 比例 关系 。 

注意 : 如 果 文字 字体 很 大 ,而 行距 相对 较 小 ,可 能 会 发 生 上 下 两 行文 字 互 相 重 登 的 
现象 。 
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3. 控制 颜色 和 背景 属性 

控制 颜色 和 背景 属性 包括 颜色 (color)\ 背景 颜色 (background-color)、 背景 图 片 
(background-image)、 背景 图 片 重复 (background-repeat)、 背景 图 片 固 定 (background- 
attachment) 背景 定位 (background-position)6 个 部 分 。 

1) 颜色 属性 

格式 : color: 参数 。 

2) 背景 颜色 

格式 : background-color: 参数 。 

参数 取 值 和 颜色 属性 一 样 。 

3) 背景 图 片 

格式 : background-image: url(URL)。 

URL 就 是 背景 图 片 的 存放 路 径 。 如 果 用 “none” 来 代替 背景 图 片 的 存放 路 径 , 将 什么 也 
不 显示 。 

4) 背景 图 片 重复 

背景 图 片 重复 控制 的 是 背景 图 片 平 铺 与 否 , 也 就 是 说 ,结合 背景 定位 的 控制 可 以 在 网 页 
上 的 某 处 单独 显示 一 幅 背 景 图 片 。 

格式 : background-repeat: 参数 。 

参数 取 值 : no-repeat, 不 重复 平 铺 背 景 图 片 ; repeat-x, 使 图 片 只 在 水 平方 向 上 平 铺 ; 
repeat-y, 使 图 片 只 在 垂直 方向 上 平 铺 。 

如 果 不 指定 背景 图 片 重复 属性 ,浏览 器 默认 的 是 背景 图 片 向 水 平 .垂直 两 个 方向 上 
平 铺 。 

5) 背景 图 片 固定 

背景 图 片 固 定 控制 背景 图 片 是 否 随 网 页 的 滚动 而 滚动 。 如 果 不 设置 背景 图 片 固定 属 
性 ,浏览 器 默认 背景 图 片 随 网 页 滚动 。 为 了 避免 过 于 花哨 的 背景 图 片 在 滚动 时 伤害 浏览 者 
的 视力 ,所 以 可 以 解除 背景 图 片 和 文字 内 容 的 捆绑 , 改 为 和 浏览 器 窗口 捆绑 。 

格式 : background-attachment: 参数 。 

参数 取 值 : fixed 一 一 网 页 滚动 时 ,背景 图 片 相 对 于 浏览 器 的 窗口 而 言 , 固 定 不 动 ; 
scroll 一 一 网 页 滚动 时 ,背景 图 片 相 对 于 浏览 器 的 窗口 而 言 ,一 起 滚动 。 

6) 背景 定位 

背景 定位 用 于 控制 背景 图 片 在 网 页 中 显示 的 位 置 。 

格式 : background-position: 参数 表 。 

参数 取 值 : 带 长 度 单位 的 数字 参数 ; top 一 一 相对 前 景 对 象 项 对 齐 ; bottom 一 一 相对 
前 景 对 象 底 对 齐 ; left 一 一 相对 前 景 对 象 左 对 齐 ; right 一 一 相对 前 景 对 象 右 对 齐 ; 
center 一 一 相对 前 景 对 象 中 心 对 齐 。@ 比 例 关系 。 

参数 中 的 center 如 果 用 于 另外 一 个 参数 的 前 面 ,表示 水 平 居 中 ; 如 果 用 于 另外 一 个 参 
数 的 后 面 ,表示 垂直 居中 。 
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【 例 3.21】 用 CSS 控制 图 片 显 示 示 例 。 


<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3.org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 
< htm]l xmlns = "http://www.w3.org/1999/xhtml"> 

<head> 


<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 


<title> 无 标题 文档 </title> 
<style type = "text/css"> 
eS 

.list{position: relative;} 

.list span img{ / * CSS for enlarged image* / 
border — width: 0; 

padding: 2px; width:300px; 

' 

.list span{ 

position: absolute; 

padding: 3px; 

border: 1px solid gray; 

visibility: hidden; 

background - color: # FFFFFF; 

b 

.list:hover{background - color:transparent;} 
.list:hover span{visibility: visible;top:0; left:60px;} 
三 二 

</style></head> 

<body> 

<p> gnbsp;</p> 


<div><a class= "list" href ="#">< img src= "imgl.jpg" width= "156" height = "122" border 
="0" />< span >< img src = "imgl. jpg" alt = "big" /></span></a></div> 


</body></html> 


在 浏览 器 中 显示 结果 如 图 3-19 所 示 。 


下 无 标题 文档 -Wicrosoft Internet Explorer 
文件 字 ) ” 妨 辑 下 ) 查看 () 收藏 全 工具 名 帮助 加 ) 


Oi- © 四 @ Pr in @ 


区 g 苇 到 


地 址 多 ) | 稳 E:\css\ess7. htn ~ 


起 file: W/E: /ess/ess?. htn# 时 我 的 电脑 


图 3-19 用 CSS 控制 图 片 显 示 
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4. 方 框 属性 

用 于 设置 元 素 的 边界 (margin) 边界 补 白 (padding)、 边 框 (border) 等 属性 值 。 使 用 方 
框 属 性 的 大 多 是 块 元 素 。 

5. 列表 属性 

用 于 设置 列表 标记 (过 ol 之 和 去 司 之 ) 的 显示 特性 。 包 括 list-style-type、 list-style- 
image,list-style-position \list-style 等 。 

(1) list-style-type: 表示 项 目 符 号 。 

格式 : list-style-type: 参数 。 


参数 取 值 如 下 。 
g@ 无 序列 表 值 : disc 一 实心 圆 点 ;circle 一 空心 圆 ; square 一 实心 方形 。 
@ 有 序列 表 值 : decimal 一 阿拉 伯 数 字 ; lower-roman 一 小 写 罗马 数字 ; 


upper-roman 一 大 写 罗马 数字 ; lower-alpha 一 小 写 英 文字 母 ; 
upper-alpha 一 大 写 英文 字母 ; none 一 不 设 定 。 

(2) list-style-image: 使 用 图 像 作为 项 目 符号 。 格式 : list style- image: url(URL)。 

(3) list-style-position: 设 定 项 目 符号 是 否 在 文字 里 面 与 文字 对 齐 。 格式 : list-style- 
position: outside/inside。 

(4) list-style: 综合 设置 项 目 属性 。 格 式 : list-style: type,position 。 

6. 定位 属性 

CSS 提供 position、top、left 和 z-index 属性 长 期 在 二 维 或 三 维 空 间 定位 某 个 元 素 相 对 
于 其 他 元 素 的 相对 位 置 或 绝对 位 置 。 

(1) position 属性 用 于 设置 元 素 位 置 的 模式 ,有 3 种 取 值 : 

Q@ absolute 表示 绝对 定位 ,原点 在 所 属 窗口 或 框架 页 面 文档 显示 区 域 的 左上 角 。 

@ relative 表示 相对 位 置 ,相对 本 元 素 的 父 元 素 的 位 置 。 

@ static( 默 认 值 ) 表 示 静 态 位 置 ,按照 HTML 文件 中 各 元 素 的 先后 顺序 显示 。 

(2) 当 position 为 absolute 时 ,top 和 left 属性 分 别 用 于 设置 元 素 与 窗口 或 框架 上 端 以 
及 左 端的 距离 ; 当 position 为 relative 时 ,top 和 left 属性 分 别 用 于 设置 元 素 与 父 元 素 上 端 
以 及 左 端的 距离 。 例 如 Div 标记 中 有 一 个 按钮 , 当 position 为 relative 时 ,按钮 位 置 的 top 
和 left 是 以 Div 标记 左上 角 为 坐标 原点 。 

(3) 在 三 维 空间 中 定位 元 素 时 ,与 之 相关 的 属性 是 z-index。 它 将 页 面 中 的 元 素 分 成 多 
个 “ 层 ”, 形 成 “ 堆 释 ”的 三 维 效果 。z-index 的 取 值 为 整数 ,可 为 正 ,也 可 为 负 。 值 较 高 的 元 素 
覆盖 较 低 的 元 素 。 

【 例 3.22】 定位 属性 示例 : 立体 效果 的 “三 维 空间 定位 ”和 阴影 效果 的 “Web 开发 技术 ”。 


<html >< head ><title> 三 维 空间 定位 </title> 

< style type= "text/css"> 

span{font — size:18pt} 

span. level2{position:absolute;z — index:2;left:100;top:100;color:red;} 

span. levell{position:absolute;z — index:1;left:101;top:101;color:green;} 

span. level0{position:absolute;z — index:0;left:102;top:102;color:yellow;} 

p. levl{position:absolute; top:200; left:220;z— index:2;font- size:36pt;color:blue;} 

Pp. lev2{position:absolute; top:220; left:250;z— index: - 2;font - size:30pt;color:darked;} 
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</style></head> 

<body> 

< span class = "level2"> 三 维 空间 定位 </span > 
< span class = "level1"> 三 维 空间 定位 </span > 
< span class = "level0"> 三 维 空间 定位 </span > 
<p class = "levl"> Web 开发 技术 </p> 

<p class = "lev2"> Web 开发 技术 </p> 
</body></html> 


在 浏览 器 中 显示 结果 如 图 3-20 所 示 。 


当 三维 空间 定位 - Hicrosoft Internet Explorer 加 回回 
文件 中 ”编辑 E) 查看 WW) 收 说 他 工具 CD) 和 助 0 


Qe- 日 ,- 国 国 铭记 时 次 x 加 | 内 -学 


国 E:cssvess6 htn 


三 维 室 间 定位 


Webt 乓 发 所 入 


图 3-20 设计 出 立体 和 阴影 效果 


7. 控制 鼠标 形状 
在 网 页 上 ,鼠标 平时 呈 箭 头 形 ,指向 链接 时 成 为 手 形 ,等 待 网 页 下 载 时 成 为 沙漏 形 …… 
虽然 这 样 的 设计 能 使 我 们 知道 浏览 器 现在 的 状态 或 是 可 以 做 什么 ,但 这 些 还 不 能 完全 满足 
我 们 的 需要 。 就 拿 链接 来 说 ,可 以 是 指向 一 个 帮助 文件 ,也 可 以 是 向 前 进 一 页 或 是 向 后 退 一 
页 ,针对 如 此 多 的 功能 光 靠 千篇一律 的 手 形 鼠标 是 不 能 说 明 问 题 的 。CSS 提供 了 多 达 13 种 
的 鼠标 形状 供 选择 ,如 表 3-7 所 示 。 
表 3-7 ”鼠标 形状 的 样式 定义 


基本 格式 (CURSOR) 鼠标 形状 参数 基本 格式 (CURSOR) 鼠标 形状 参数 
style= "cursor: hand" 手 形 style= "cursor:crosshair” 十 字形 
style= "cursor: wait" 沙漏 形 style= "cursor: move" 十 字 箭 头 形 
style= "cursor:e-resize" 右 箭头 形 style= "cursor:n-resize” 上 箭头 形 
style= "cursor:text" 文本 形 style= "cursor: w-resize” 左 箭头 形 
style= "cursor: help" 间 号 形 style= "cursor: s-resize" 下 第 头 形 
style= "cursor: nw-resize" 左上 箭头 形 style 一 "cursor:se-resize" 右 下 箭头 形 


style= "cursor: sw-resize" 左下 箭头 形 


107 


108 
开发 技术 (第 2 版 ) 


8. 滤 镜 

CSS 提供 了 一 些 内 置 的 多 媒体 滤 镜 特效 ,使 用 这 种 技术 可 以 把 可 视 化 的 滤 镜 和 转换 效 
果 添 加 到 一 个 标准 的 HTML 元 素 上 ,例如 图 片 ,文本 容器 ,以 及 其 他 一 些 对 象 。 

1) alpha 滤 镜 

语法 : {filter: alpha(Copacity 王 属性 值 1,finishopacity 王 属性 值 2, style= 王 属性 值 3， 
startx 一 属性 值 4,starty 王 属性 值 5,finishx 王 属性 值 6,finishy 王 属性 值 7); } 

作用 : 该 滤 镜 能 够 使 对 象 呈现 渐变 半 透 明 效 果 , 效 果 由 小 括号 中 的 各 属性 名 及 其 对 应 
的 属性 值 决定 。 

参数 : opacity 属性 用 于 设置 不 透明 的 程度 ,用 百分比 表示 其 属性 值 ,大 小 从 0 一 100,0 
表示 完全 透明 ,100 表示 完全 不 透明 。 

finishopacity 属性 是 同 opacity 一 起 使 用 的 一 个 选择 性 的 参数 , 当 同 时 设 定 opacity 和 
finishopacity 时 ,可 以 制作 出 透明 渐进 的 效果 ; 其 属性 值 也 是 从 0 一 100,0 表示 完全 透明 ， 
100 表示 完全 不 透明 。 

style 属性 用 来 设置 渐变 风格 , 当 同 时 设 定 了 opacity 和 finishopacity 产生 透明 渐进 时 ， 
它 主要 是 用 来 指定 渐进 的 显示 形状 : 0 代表 均匀 渐进 ; 1 代表 线形 渐进 ; 2 代表 放射 渐进 ; 3 
代表 直角 渐进 。 

startx 属性 用 来 设置 水 平方 向 渐进 的 起 始 位 置 。finishx 属性 用 来 设置 水 平方 向 渐进 的 
结束 位 置 。finishy 属性 用 来 设置 竖 直 方向 渐进 的 结束 位 置 。 

【 例 3.23】 alpha 滤 镜 示例 。 


< htm]l > 

<head> 

<meta http~ equiv = "Content - Type" content = "text/html; charset = gb2312"> 

< title> ALPHA 滤 镜 实例 </title> 

< style> 
img{width:70 % ;height:70 % ;filter:alpha(opacity= 100, finishopacity= 0, 
style= 3, startx = 0, starty = 85, finishx = 150, finishy = 85);} 

se 

</style> </head> 

<body> 

<palign= "center" style= "color: red; 

font - size:20pt; text — decoration:blink; font ~— weight:bold;"> 

ALPHA 滤 镜 实例 </p> 

<palign= "center">< img src= "img1.jpg"></p> 

</body></html> 


在 浏览 器 中 显示 结果 如 图 3-21 所 示 。 
2) blur 滤 镜 
语法 : {filter:blur(Cadd 王 属性 值 1，direction 王 属性 值 2,strength 王 属性 值 3); } 。 
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沁 ALPHA 滤 樟 实 例 - 了 icrosoft Internet Explorer 
文件 人 E) 编辑 也 ) 查看 WD 收 总 和 工具 帮助 0 


三 - 昌 - 国 国 纹 有 时 六 加 卫 - 癌 


地 址 @) | 格 |E;\css\filterl htn 


3-21 alpha 滤 镜 实例 


作用 : 该 滤 镜 能 够 使 对 象 表 现 一 种 模糊 的 效果 。 

参数 : add 属性 用 来 确定 是 否 在 运动 模糊 中 使 用 原 有 目标 ,其 属性 值 有 0 和 1 两 种 ,0 
表示 在 模糊 运动 中 不 使 用 原 有 目标 ,大 多 数 情 况 下 适用 于 图 像 ; 1 代表 在 模糊 运动 中 使 用 
原 有 目标 ,大 多 数 情况 下 适用 于 文本 。 

direction 属性 用 来 表示 模糊 移动 时 的 角度 ,其 属性 值 范围 为 0" 一 360"。 

strength 属性 用 来 表示 模糊 移动 时 的 距离 ,该 属性 值 一 般 可 以 任意 设置 。 

【 例 3.24】 blur 滤 镜 示例 。 


<html > < head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 
<title> blur 滤 镜 实例 </title> 
< style> 
到 和 
img{width:70 % ;height:70%; 
filter:blur(add= 0, direction = 45, strength = 50;) 
--></style> 
</head> 
<body> 
<palign= "center" style= "color: red; 
font - size:20pt; text - decoration:blink; font - weight:bold;"> 
blur 滤 镜 实例 </p> 
<p align = "center">< img src = "img1. jpg"></p> 
</body> </html > 


在 浏览 器 中 显示 结果 如 图 3-22 所 示 。 
3) dropshadow 滤 镜 
语法 : {filter:dropshadow(color 二 属性 值 1,offx== 属 性 值 2,offy= 属 性 值 3,positive 一 
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于 blur 涉 镜 实 例 - Microsoft Internet Explorer 
文件 EE) 编辑 人 E) 查看 匀 。 收 若 如 工具 上 帮助 中 


@ -昌国 国 的 | 忆 mr 下 wax 加 | 全- 尼 


EE:\css\filter2 htn > Ee Wd 


blur 滤 镜 实 例 


图 3-22 blur 滤 镜 实例 


属性 值 4) ; }。 

作用 : 该 滤 镜 主要 用 来 产生 图 像 的 重 释 效 果 。 

参数 : color 属性 用 来 设置 投影 文字 的 颜色 。 

offx 属性 代表 投影 文字 与 原文 字 之 间 水 平方 向 上 的 偏 移 量 。 

offy 属性 代表 投影 文字 与 原文 字 之 间 垂 直方 向 上 的 偏 移 量 。 

positive 属性 是 一 个 布尔 值 (0 或 者 1) ,如 果 为 true( 非 0) ,那么 就 为 任何 非 透明 像素 建 
立 可 见 的 投影 ; 如 果 为 false(0) ,那么 就 为 透明 的 像素 部 分 建立 透明 效果 。 

【 例 3.25】 dropshadow 滤 镜 示例 。 


< htm]l >< head> 

<title> dropshadow </title> 

< style> 
div {position:absolute; top:50;width:500; 
filter:dropshadow(color = blue, offx= 12,offy= 6,positive=1); } 

——-></style> 

</head> 

<body> 

<div> 

<p style= "font ~ family:matisse itc;font ~ size:35;font ~ weight:bold;color:red;"> 

Cascading Style Sheets </p> 

</div> </body> </html > 


在 浏览 器 中 显示 结果 如 图 3-23 所 示 。 
4) glow 滤 镜 
语法 : {filter:glow(color 王 属性 值 1,strength 王 属性 值 2); }。 
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避 dropshadow — icrosoft Internet Ezplorer 
文件 到) 编辑 EE) 查看 局 ) 收 阅 如 ) 工具 CC) 帮助 中 


@ 扣 -昌国 国 久 有 P 时 六 wx 如 全- 学 


) | 入 |E:\css\filter3. htn 


3-23 ”dropshadow 滤 镜 实例 


作用 : 该 滤 镜 能 够 在 原 对 象 周围 产生 一 种 类 似 发 光 的 效果 。 

参数 : color 属性 指定 发 光 的 颜色 。 

strength 则 是 发 光 强 度 的 表现 ,也 指 光量 的 厚度 ; 其 大 小 可 在 1 一 255 之 间 。 
【 例 3.26】 glow 滤 镜 示例 。 


< htm]l >< head> 
<title> filter glow</title> 
< style> 
四 
.A{position:absolute; top: 20; left:50;width:500;filter:glow(color = #3FF3500, strength= 
15);} 
-—></style> 
</head> 
<body> 
<div class = "A"> 
<p style= "font -~ family:lucida handwriting;font ~ size: 
54pt;font - weight:bold;color: #003366;"> Just Do It!</p> 
</div> 
</body></html > 


在 浏览 器 中 显示 结果 如 图 3-24 所 示 。 

5) chroma 滤 镜 

语法 : {filter:chroma(color 一 属性 值 ); } 。 

作用 : 该 滤 镜 能 够 使 图 像 中 的 某 一 颜色 变 成 透明 色 。 

参数 : color 属性 用 来 指定 要 变 为 透明 色 的 颜色 。 通 过 该 属性 值 的 设 定 ,我 们 可 以 来 过 
滤 某 图 像 中 的 指定 颜色 。 

【 例 3.27】 chroma 滤 镜 示例 。 
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filter glow - 了 icrosoft Internet Explorer 
查看 WD 收 亭 @) 工具 CD) 帮助 中 


OO OO me 全 -学 


地 十 加 ) | 全 Evessfiltert htn 


文件 于) ”编辑 巴 ) 


图 3-24 glow 滤 镜 实例 


< htm]l >< head > < title> chroma filter </title> 
< style> 
3 


div{position:absolute;top:70;left:50;filter:chroma(color = green)} 
p{font - family:bailey;font — size:68;font - weight:bold;color:green} 
em{font - family:lucida handwriting italic;font - size:68, 
font - weight :bold;color:rgb(255,51,153)} 

--></style> 

</head> 

<body> <div><p>JUST <em>DO IT</em></p> 

</div> 

</body> </html > 


在 浏览 器 中 显示 结果 如 图 3-25 所 示 。 


加 chroaa filter - Wicrosoft Internet Explorer 


文件 于 ) ”编辑 下 ) 查看 WW) 收 襄 &) 工具 I) 帮助 00 


@e- 日 -四 回信 Pe 次 wmx 加 | 全. 呈 


地 址 0 类 |E:\ess\filter5. htn 


图 3-25 ”chroma 滤 镜 实例 
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6) flipH 与 flipV 滤 镜 

语法 : {filter: filph;) 或 者 {filter: filpv;})。 

作用 : 该 滤 镜 能 够 使 HTML 图 片 对 象 进行 左右 或 上 下 翻转 。 该 滤 镜 没有 参数 。 
【 例 3.28】 flipH flipV 滤 镜 示例 。 


<html > <head><title> flip css</title> 
< style> 
一 
div{position:absolute; top:0;left:150;filter:fliph;} 
img{position:absolute; top:80; left:80;width:70 % ;height:70 % ;filter:flipv;} 
-—-></style> 
</head> 
<body><div> 
<p style= "font - family:bailey;font- size:36pt;font ~ weight:bold; 
color:rgb(10,128,156);"> Winter </p> 


</div> 
<p>< img src= "Winter. jpg"></p> 
</body> </html > 


在 浏览 器 中 显示 结果 如 图 3-26 所 示 。 


flip css - Wicrosoft Internet Explorer 
文件 @) 编辑 下) 查看 Q) 收藏 岂 ) 工具 XT) 帮助 0 


@ 避 -日 - 国 轩 的 | Pa 闪 wmx 加 | 全- 且 


地 址 问 ) 个.\css\filter8. htn 


av 


图 3-26 flipH ,flipV 滤 镜 实例 


7) wave 滤 镜 

语法 : (filter:wave(add 二 属性 值 1 .freq 二 属性 值 2,lightstrength 王 属性 值 3,phase 一 
属性 值 4,strength 王 属性 值 5); }。 

作用 : 该 滤 镜 能 够 使 被 过 滤 对 象 生成 正弦 波形 ,从 而 能 造成 一 种 变形 幻觉 。 

参数 : add 属性 是 一 个 布尔 值 , 它 用 来 决定 是 否 将 原始 图 像 加 入 最 后 的 效果 之 中 。 

freq 属性 是 指 波纹 的 频率 ,也 就 是 指定 在 对 象 上 一 共 需 要 产生 多 少 个 完整 的 波纹 。 

phase 属性 是 用 来 设置 正弦 波 的 偏 移 量 , 它 决定 波形 的 形状 ,其 属性 值 的 取 值 范围 为 
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0" 一 360"。 
lightstrength 属性 用 于 对 波纹 增强 光影 的 效果 ,其 取 值 范围 为 从 0 一 100。 
strength 属性 用 来 决定 波形 振幅 的 大 小 。 
【 例 3.29】 wave 滤 镜 示例 。 


< htm]l >< head> <title> wave css</title> 

< style> 

上 二 
.wave{position:absolute;top:0;1left:120;filter:wave(add= 1, freq= 3, 
lightstrength= 100, phase = 45, strength= 20);} 

--></style> 

</head> <body> 
<div class = "wave"><p style= "font ~ family:lucida handwriting;font - size = 40pt; 

font - weight :bold;color:rgb(189, 1,64);"> Winter </p> 

</div> 

<p>< img src= "Winter2. jpg" style= "filter:wave 
(add=0,freq=5, lightstrength= 50, phase= 100, strength=5)"></p> 
</body> </html > 


在 浏览 器 中 显示 结果 如 图 3-27 所 示 。 


wave css - Microsoft Internet Explorer 


文件 下 ) ”编辑 区) ”查看 WW 收藏 由 工具 XI) 帮助 00) 
DIEM. Xd 2 


) | 多 Evess\filterT.htm 司 图 # 到 链接 ” 


图 3-27 wave 滤 镜 实例 


8) shadow 滤 镜 

语法 : {filter:shadow(color 王 属性 值 1,direction 王 属性 值 2); } 。 

作用 : 该 滤 镜 能 够 使 对 象 产生 一 种 阴影 效果 。 

参数 : color 属性 是 用 来 设置 阴影 的 颜色 。direction 属性 是 用 来 设置 投影 的 方向 , 取 值 
范围 为 0" 一 360 ,其 中 0 代表 垂直 向 上 ,然后 每 45 为 一 个 单位 ,该 属性 的 默认 值 是 向 左 
的 270°。 

【 例 3.30】 shadow 滤 镜 示例 。 
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<html >< head> <title> shadow css </title> 
<style> 
Ee 
. Shadow{position:absolute; top:100;left:80;filter:shadow(color = red, direction= 60);} 
--> </style> </head> 
<body> 
<div class = "shadow"> 
<p style= "font - family: 隶 书 , 宋 体 ;font - size:60pt;font - weight:bold;color: blue;"> 欢迎 光 
临 </P></div> 
</body> </html > 


在 浏览 器 中 显示 结果 如 图 3-28 所 示 。 


加 shadow css - 了 icrosoft Internet Explorer 


文件 加 编辑 如 查看 WW， 收藏) 工具 加 帮助 人 0 
四 银 - 四 国 国 多 有 时 六 如 | 耻 - 部 


地 址 四 ) | 楼 E;\ess\filter8 htn 


3-28 ”shadow 滤 镜 实例 


9) mask 滤 镜 

语法 : {filter:mask(Ccolor 一 属性 值 ); } 。 

作用 : 该 滤 镜 能 够 利用 一 个 HTML 对 象 在 另 一 个 对 象 上 产生 图 像 的 咕 单 ,可 以 为 对 象 
建立 一 个 覆盖 于 表面 的 膜 , 其 效果 就 像 戴 着 有 色 眼 镜 看 物体 一 样 。 

参数 : color 属性 用 来 指定 要 被 谈 畦 的 颜色 。 

【 例 3.31】 mask 滤 镜 示例 。 


< htm]l >< head > <title> mask css </title> 

< style> 

| 

. mask{position:absolute; top:100; left:80;filter:mask(color = blue);} 
——></style></head> 

<body> 

<div class = "mask"> 

<p style= "font - family: 隶 书 ,宋体 ;font - size:60pt;font - weight:boldicolor:black; "> 欢迎 光 
临 </P></div> 

</body> 

</html> 
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在 浏览 器 中 显示 结果 如 图 3-29 所 示 。 


到 mask css - 了 icrosoft Internet Explorer 


文件 四 编辑 下) 查看 外 收藏 内 工具 帮助 0 
@ 扣 - 上 日 - 国 国 入 记过 次 Wx 加 思 - 生 


地 让 加 | 个 E:\css\filter9 ht > Ei ed 


Bl 是 我 的 电脑 


3-29 mask 滤 镜 实例 


10) light 滤 镜 

语法 : {filter: light; } 。 

作用 : 该 滤 镜 能 够 使 HTML 对 象 产生 一 种 模拟 光源 的 投射 效果 。light 可 用 的 方法 
有 : AddAmbient, 加 入 包围 的 光源 ; AddCone, 加 入 锥 形 光 源 ; AddPoint, 加 入 点 光源 ; 
Changcolor, 改 变 光 的 颜色 ; Changstrength, 改 变 光源 的 强度 ; Clear, 清除 所 有 的 光源 ; 
MoveLight ,移动 光源 。 

可 以 定义 光源 的 虚拟 位 置 ,以 及 通过 调整 X 轴 和 Y 轴 的 数值 来 控制 光源 焦点 的 位 置 ， 
还 可 以 调整 光源 的 形式 (点 光源 或 者 锥 形 光 源 ) 指 定 光源 是 否 模糊 边界 .光源 的 颜色 .亮度 等 
属性 。 如 果 动 态 地 设置 光源 ,可 能 会 产生 一 些 意 想不到 的 效果 。 

【 例 3.32】 light 滤 镜 示例 。 


< html >< head ><title> light css</title></head> 


<body> 
< img id= "lightsy" src= "imgl.jpg" width= "400" height = "260" style= "filter: light(enabled 
=1)"> 
< script language = "javascript"> 
mt 


window. onload = setlightsl; 
lightsy. onmousemove = mousehandler; 
function setlights1(){ 
lightsy. filters[0].addcone(380, - 20,5,100,100,255,255,0,40,25); } 
function mousehandler( ) 
{ x= (window.event.x— 40); 
y= (window. event. y— 40); 
lightsy. filters[0].movelight(0, x,y,5,1); 
' 
——></script> 
</body> 
</html> 
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在 浏览 器 中 显示 结果 如 图 3-30 所 示 。 


light — Nicrosoft Internet Explorer 


文件 FE) ”编辑 于 ) 查看 WW) 收 总 和) 工具 (I) 帮助 由) 


四 银 - 回 - 国 国 折 2 


地 址 @) | 机 E:\css\filterl0. htn 


图 3-30 light 滤 镜 实例 


11) gray 滤 镜 ,invert 滤 镜 、xray 滤 镜 

语法 : {filter:gray;)、 {filter:invert;)、 {filter: xray;}。 

作用 : gray 滤 镜 能 够 使 一 张 彩色 的 图 片 转变 为 灰色 调 图 像 。invert 滤 镜 能 够 使 图 像 产 
生 照 片 底片 的 效果 。xray 滤 镜 能 够 让 对 象 反映 出 它 的 轮廓 并 把 这 些 轮廓 加 亮 显示 。 这 3 
个 滤 镜 都 没有 附带 参数 。 

【 例 3.33】 gray、invert、xray 滤 镜 示例 。 


< html > 

< head >< title> gray invert xray css </title> 

</head> 

<body style = "text ~ align: center"> 

本 

<td> gnbsp; &nbsp; &nbsp; &nbsp; &nbsp; gray 滤 镜 &nbsp; &nbsp; &nbsp; Snbsp; &nbsp; &nbsp; 
invert 滤 镜 < br/> 


< img src= "imgl. jpg" alt = gray width = 210 height = 130 style= "filter:gray"> </td> 
<td>< img src = "imgl. jpg" alt = invert width= 210 height = 130 style= "filter:invert"> </td> 
xray 滤 镜 < br/> 
<td>< img src= "imgl. jpg" alt = xray width = 210 height = 130 style = "filter:xray"> </td> 
</tr> 
</body> 
</htm]l > 


在 浏览 器 中 显示 结果 如 图 3-31 所 示 。 
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文件 @) ” 往 辑 区 ) 查看 外 收藏 和 ) 工具 人 ) 帮助 0D 


a- 加 BO Pm hl 马 


图 3-31 gray、invert、xray 滤 镜 实例 


3.2.6 CSS 应 用 实例 


本 例 通过 设计 一 个 个 人 主页 来 演示 CSS 的 用 法 。 该 主页 使 用 表格 作为 主要 结构 ,一 
表 的 单元 格 中 又 嵌入 另 一 个 表 , 通 过 使 用 CSS, 在 头 部 一 style 之 标记 集中 定义 了 页 面 的 显示 
样式 ,又 通过 内 联 样式 定义 了 页 面 中 按钮 风格 的 栏目 “团结 >“ 进 取 ” 等 单元 格 ,使 得 页 面 显 
示 风 格 灵活 多 样 。 注 意 块 级 元 素 div 和 span 用 于 定义 内 容 块 或 区 域 , 它 们 本 身 并 不 显示 任 
何 内 容 , 但 通过 给 div 定义 样式 , 则 可 以 将 样式 应 用 到 所 有 包含 在 二 div 宝 和 二/div 二 之 间 的 
不 同 标记 符 上 ,而 不 需要 为 其 中 的 每 个 元 素 指定 样式 规则 。 

【 例 3.34】 CSS 综合 应 用 实例 。 源 代码 如 下 : 


< htm]l >< head > 
< style type = "text/css"> 
a:link{font - size:9pt; text - decoration:none} 
a:visited{font ~ size:9pt; text - decoration:none} 
a:active{font - size:9pt; text ~ decoration:none} 
a:hover{font - size:9pt;text ~ decoration:none} 
body{font - size:9pt;line— height:13pt} 
table{font - size:9pt;line— height:13pt} 
tr{font ~ size:9pt;} 
td{font - size:9pt; text — align:center;} 
td. border { border - right: 1px ridge; border - top: 1px ridge; border - left: 1px ridge; borer — 
bottom:1px ridge; 
.effont - size:9pt;font ~ family:"MS Sans Serif" ;text -decoration:none} 
div. mycenter { text 一 align:center} 
body { scrollbar - face - color: #3165B5; scrollbar - highlight - color: #93bc9c; 
/* 设 置 滚动 条 的 外 观 * / 
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scrollbar — 3dlight - color: # 8AB8DC; scrollbar - darkshadow — color: # COCOCO; 
scrollbar - shadow — color: # FFFFFF; scrollbar — arrow — color: # FFFFFF; 
scrollbar — track — color: # ES5EEF7; 

backgroud - image:url(desert. jpg) ;background - position:0% 0%} 
</style></head> 


<body bgColor = " #ffffff" leftMargin = "0" background = "desert. jpg" topMargin = "0"> 
<div class = "mycenter"> 
<table cellSpacing = 0 cellPadding = 0 width= 720 border =0> 
<tr><tdwidth= "100% "> 
<table cellPadding = 0 width= 760 border =0> 
<tr><td width= "27% "> 
< img border = "0" src = "adl. jpg" width = "220" height = "42"></td> 
<td width= "73%"></td></tr></table> 
<table cellPadding = 2 width = 743 border = 0 name = "nav"> 
<tr><td class = "border" width = 103 bgColor = #a7d6ba > 团结 </td> 
<td class = "border" width = 103 bgColor = #a7d6ba> 进 取 </td> 
<td class = "border" width = 103 bgColor = #a7d6ba> 友 谊 </td> 
<td class = "border"” width = 103 bgColor = #a7d6ba> 开 朗 </td> 
< td class = "border" width = 103 bgColor = #a7d6ba> 奋 斗 </td> 
<td class = "border” width = 103 bgColor = #a7d6ba> 成 功 </td> 
<td class = "border" width = 86 bgColor = #a7d6ba > 主页 </td> 
</tr></table> 
<table cellPadding = 0 cellPadding = 0 width= 720 border = 0> 
<tr><td width= 718 colspan = 2><hr color = #abdlef size=1></td></tr> 
<tr><td width=613> 
< font color = #ff6c26 >< span class = e> 便 </span></font > 
<font color = #00800 size = "2"> 精 彩 人 生 </font > 
< font color = #ff6c26 >< span class = e> 便 </span></font ></td></tr> 
<tr><td width= 613> 
<table cellPadding = 0 cellPadding = 0 width= "85%" border =0> 
<tr><td width= "100% "> 
< table borderColor = #ffffff cellpadding = 2 width= "100%" border =1> 
<tr><td borderColor = #70b8e2 width = "23% "> 学 生 时 代 </td> 
< td borderColor = #70b8e2 width = "77g% "> 多 次 被 评 为 三 好 学 生 </td></tr> 
<tr><td borderColor = #70b8e2 width = "23% "> 工作 历程 </td> 
<td borderColor = 井 70b8e2 width = "77% "> 先进 员工 </td></tr> 
</tr></table></td></tr></table> 
</td></tr></table></div> 
</BODY ></HTML > 


在 浏览 器 中 显示 结果 如 图 3-32 所 示 。 

首先 在 VS 2010 中 ,通过 添加 新 项 ,选择 样式 表 , 生 成 一 个 空 的 样式 表 , 在 CSS 大 纲 中 ， 
通过 快捷 菜单 中 的 “添加 样式 规则 ”选择 施加 样式 的 元 素 或 者 指定 类 名 和 元 素 ID, 之 后 新 建 
的 元 素 或 者 输入 的 类 名 和 元 素 ID 就 会 出 现在 CSS 大 纲 中 ,然后 鼠标 右 击 新 建 的 元 素 、 类 名 
或 者 元 素 ID, 单 击 “ 生 成 样式 ”, 就 会 出 现 如 图 3-33 所 示 的 修改 样式 界面 。 通 过 该 界面 可 自 
动 生成 所 需要 的 样式 ,而 不 需要 你 死记 硬 背 样式 名 称 。 然 后 将 生成 的 样式 粘贴 到 上 述 源 代 
码 中 。VS 2010 中 的 样式 生成 器 可 生成 大 部 分 样式 ,不 过 仍 有 部 分 样式 需要 参阅 相关 资料 ， 
手工 处 理 , 例 如 上 例 中 的 滚动 条 的 样式 设置 。 
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到 E\css\shilihtml - Microsoft Internet Explorer 


文件 (E) ”编辑 (E) ”查看 (WD 收 送 (4) 工具 (D 帮助 (只 


@se -日 -四 四 Pa 南昌 


地 址 (D) | 乱 ] E:Vcsstshiihtml 


3-32 CSS 设计 个 人 主页 实例 


修改 样式 LE | 
类 别 C) 
font-fanily; | 加 | 
背景 Eont-size: | =] [-] text-decoration: 
ee font-weieht: | = Re 

overline 
定位 font-style: | = line-throueh 
布局 font-variant: | 四 uink 
erg text-transforn: | 了 回 aone 

eeler: | 四 | 
微软 卓越 AaBbCc 

说 明 

CD EE 


图 3-33 VS 2010 中 的 CSS 样式 生成 器 


思考 练习 题 


1. 简要 说 明 什 么 是 HTML。 
2. 创建 一 个 页 面 ,该 页 面 由 两 段 不 同 的 文字 组 成 ,第 一 段 文字 全 部 是 黑体 ,颜色 为 红 
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色 ,字体 大 小 为 四 号 ; 第 二 段 文字 的 第 一 个 字 大 小 为 五 号 ,颜色 为 蓝 色 ,字体 为 隶书 ,其 他 文 
字 全 部 是 宋体 ,大 小 为 三 号 ,颜色 为 黑色 。 

3. 简要 说 明 框 架 在 网 页 布局 中 的 作用 。 

4. 什么 是 CSS? 与 传统 的 HTML 文档 相 比 较 , 使 用 CSS 有 什么 优点 ? 

5. 为 网 页 添加 样式 表 的 方法 有 哪 几 种 ? 它们 之 间 有 什么 区 别 ? 

6. 创建 一 个 包含 10 个 页 面 左右 的 网 站 。 要 求 所 有 页 面 中 的 标题 .正文 ,图像 和 链接 具 
有 相同 的 样式 ; 所 有 的 样式 定义 都 位 于 单独 的 样式 文件 中 ,所 有 HTML 文件 都 使 用 链接 的 
方法 将 样式 文件 链接 到 当前 文件 中 。 要 求 合 理 使 用 文字 、 图 像 , 并 用 表格 进行 适当 排版 , 导 
航 结构 清晰 ,具有 一 定 的 站 点 风格 。 

7. 上 网 浏览 ,查看 源 代码 ,分析 优 秀 网 站 是 如 何 使 用 CSS 技术 的 。 
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学 习 要 点 

(1) 掌握 JavaScript 语言 的 语法 结构 和 流程 控制 。 

(2) 掌握 JavaScript 语言 的 事件 和 对 象 编程 方法 。 

(3) 学 会 使 用 JavaScript 内 置 对 象 编 程 。 

(4) 了 解 HTML DOM 主要 对 象 .jQuery 选择 器 ,掌握 HTML DOM、 
jQuery 编程 技术 。 


上 一 章 介 绍 了 HTML 常用 的 标记 和 CSS 技术 ,利用 它们 可 以 创建 出 具 
有 复杂 格式 的 网 页 ,但 这 些 页 面 是 静态 的 ,用 户 只 能 静态 地 查看 所 显示 的 内 
容 , 而 无 法 和 网 页 进行 交互 。 而 一 旦 需要 改变 某 个 内 容 , 则 必须 在 原来 的 页 
面 上 修改 ,甚至 会 发 生 很 大 的 布局 变化 。 这 往往 会 给 设计 人 员 带 来 许多 不 
便 ,尤其 是 对 大 型 网 站 ,其 信息 呈现 的 方式 不 断 变化 ,如 果 采 用 静态 页 面 技 
术 , 对 设计 人 员 来 说 可 能 是 一 种 灾难 。 

事实 上 ,每 一 个 HTML 标记 或 者 称 为 HTML 元 素 ( 有 时 也 称 HTML 标 
签 ) 都 可 看 成 一 个 在 浏览 器 中 显示 的 对 象 ,可 以 利用 脚本 语言 例如 JavaScript 
来 操控 这 些 对 象 ,使 它们 的 行为 和 外 观 在 浏览 器 中 动态 改变 。 这 就 是 所 谓 的 
DHTML(Dynamic HTML) 技 术 。 

DHTML 并 不 是 一 门 新 的 语言 , 它 只 是 HTML、CSS 和 一 种 脚本 程序 的 
集成 。 其 中 : 

。 HTML 元 素 , 也 即 页 面 中 的 各 种 标记 对 象 ,它们 是 被 动态 操纵 的 

内 容 ; 
。 CSS 属性 ,也 可 被 动态 操纵 ,从 而 获得 动态 的 格式 效果 ; 
。 脚本 程序 (如 JavaScript、VBScript) , 它 实际 操纵 Web 页 上 的 HTML 
和 CSS。 

脚本 程序 区 分 为 客户 端 脚本 程序 (通过 客户 端 浏 览 器 解释 执行 ) 和 服务 
器 端 脚本 程序 (在 服务 器 端 解释 或 编译 后 执行 ,例如 ASP/ASP. NET、JSP、 
PHP 等 )。 客 户 端 脚本 比 服务 器 端 脚本 程序 在 执行 任务 上 有 明显 的 优越 性 ， 
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由 于 客户 端 脚 本 程序 随 网 页 同时 下 载 到 客户 机 上 浏览 器 缓存 中 ,通过 浏览 器 解释 执行 ,因此 
在 对 网 页 进行 验证 或 响应 用 户 动作 时 无 须 使 用 网 络 与 Web 服务 器 进行 通信 ,从 而 降低 了 网 
络 的 传输 量 和 Web 服务 器 的 负荷 ,改善 了 系统 的 整体 性 能 。 但 客户 端 脚本 程序 并 不 能 解决 
所 有 问题 ,例如 数据 库 操 作 、 访 问 计 数 器 等 ,必须 使 用 服务 器 端 脚本 程序 来 实现 。 本 章 仅 讨 
论 客户 端 脚本 程序 。 

DHTML 使 网 页 设计 者 可 以 动态 操纵 网 页 上 的 所 有 元 素 。 利 用 DHTML ,网 页 设计 者 
可 以 动态 地 隐藏 或 显示 内 容 ,修改 样式 定义 、 激 活 元 素 以 及 为 元 素 定位 。 此 外 ,网 页 设计 者 
还 可 利用 DHTML 在 网 页 上 显示 外 部 信息 ,方法 是 将 元 素 捆绑 到 外 部 数据 源 ( 如 文件 和 数 
据 库 ) 上。 所 有 这 些 功 能 均 可 用 浏览 器 完成 而 无 须 请 求 Web 服务 器 ,同时 也 无 须 重新 装载 
网 页 。 

由 于 某 些 浏览 器 对 微软 公司 早先 推出 的 脚本 语言 VBScript 支持 不 力 ,微软 公司 又 推出 
了 脚本 语言 JScript, 它 和 Netscape 公司 推出 的 JavaScript 语言 在 用 法 上 几乎 完全 相同 。 本 
章 着 重 介 绍 JavaScript 语言 及 其 相关 动态 网 页 制作 技术 。 


4.1 JavaScript 编程 技术 及 实例 


4.1.1 JavaScript 语言 简 述 

JavaScript 是 一 种 嵌入 HTML 文件 中 的 脚本 语言 , 它 是 基于 对 象 驱动 的 ,能 对 鼠标 单 
击 、 表 单 输入 、 页 面 浏 览 等 用 户 事件 做 出 反应 并 进行 处 理 。JavaScript 具有 以 下 特点 。 

1. 简单 性 

JavaScript 是 简化 的 编程 语言 ,不 像 高 级 语言 有 严格 的 使 用 限制 ,使 用 简洁 灵活 。 例 如 
在 JavaScript 中 可 直接 使 用 变量 ,不 必 事 先 声 明 ,变量 类 型 规定 也 不 十 分 严格 。 

2. 基于 对 象 

JavaScript 是 一 种 基于 对 象 (object-based) 的 语言 ,允许 用 户 自 定义 对 象 ,同时 浏览 器 还 
提供 大 量 的 内 建 对 象 ,可 以 将 浏览 器 中 不 同 的 元 素 作 为 对 象 处 理 , 体 现 了 面向 对 象 编程 的 思 
想 。 但 JavaScript 并 不 完全 面向 对 象 ,不 支持 类 和 继承 。 

3. 可 移植 性 

JavaScript 可 在 大 多 数 浏 览 器 上 不 经 修改 直接 运行 。 

4. 动态 性 

JavaScript 是 DHTML 的 重要 组 成 部 分 ,是 设计 交互 式 动 态 特别 是 客户 端 动态 页 面 的 
重要 工具 。 

5. 安全 性 

JavaScript 是 一 种 安全 性 语言 , 它 不 允许 访问 本 地 的 硬盘 ,并 不 能 将 数据 存 入 到 服务 器 
上 ,不 允许 对 网 络 文档 进行 修改 和 删除 ,只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ,从 而 可 
有 效 地 防止 数据 的 丢失 。 

JavaScript 与 Java 在 命名 、 结 构 和 语法 上 都 很 相似 ,但 两 者 存在 重要 的 差别 。 

(1) Java 是 Sun 公司 推出 的 新 一 代 面 向 对 象 的 程序 设计 语言 ,支持 类 和 继承 ,主要 应 用 
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于 网 络 编程 ; JavaScript 只 是 基于 对 象 的 ,主要 用 于 Web 页 面 编 写 脚 本 ,是 Netscape 公司 
的 产品 。 

(2) Java 程序 编译 后 以 类 的 形式 存放 在 服务 器 上 ,由 浏览 器 下 载 用 Java 虚拟 机 去 执行 
它 。JavaScript 源 代 码 嵌 入 HTML 文件 中 ,使 用 时 由 浏览 器 对 它 进 行 识别 .解释 并 执行 。 

(3) Java 采用 强 变量 检查 , 即 所 有 变量 在 编译 之 前 必须 声明 。JavaScript 中 变量 声明 采 
用 弱 变 量 ,在 使 用 前 不 需 作 声明 ,而 由 解释 器 在 运行 时 检查 其 数据 类 型 。 

(4) Java 程序 可 单独 执行 ,而 JavaScript 程序 只 能 嵌入 HTML 中 ,不 能 单独 执行 。 

(5) Java 程序 的 编写 编译 需要 专门 的 开发 工具 ,如 JDK (Java Development Kit)、 
Visual J 十 十 等 ; 而 JavaScript 程序 只 是 作为 网 页 的 一 部 分 嵌入 HTML 中 ,编写 JavaScript 
程序 只 要 用 一 般 的 文本 编辑 器 即 可 。 


4.1.2 JavaScript 编程 基础 

1. 将 JavaScript 程序 能 入 HTML 文件 的 方法 

(1) 在 HTML 文件 中 使 用 二 script 二 、 二 /script 过 标记 来 加 入 JavaScript 语句 ,可 位 于 
HTML 文件 的 任何 位 置 。 最 好 是 将 所 有 脚本 程序 放 在 HEAD 标记 内 ,以 确保 容易 维护 。 
在 Script 标记 之 间 加 上 “二! 一 ”和 *“// 一 二 ”表示 如 果 浏 览 器 不 支持 JavaScript 语言 ,这 段 代 
码 不 执行 。 

【 例 4.1】 HTML 文件 中 使 用 脚本 语言 示例 1。 


< htm]l > 
<head> 
< meta http - equiv = "Content ~ Type" content = "text/html; charset = gb2312"> 
<title> HTML 中 如 何 使 用 script 语言 -- 设置 收藏 夹 实例 </title> 
</head> 
< script language = "javascript"> 
ee 

alert( 'Hello'); // 显 示 消息 对 话 框 
function Add Favorite(url, title) 

{ 

window. external. AddFavorite(url, title); // 放 到 收藏 夹 

} 

> 和 

</script > 

<body> 

<A HREF = "javascript:Add_Favorite( 'http://cqu. edu. cn', ' 重 庆 大 学 ');"> 收 藏 本 站 </A> 
</body></html> 


代码 可 以 放 在 函数 中 ,也 可 以 不 放 在 函数 中 。 不 放 在 函数 中 的 代码 在 浏览 器 加 载 
HTML 页 面 后 还 没有 呈现 HTML 显示 效果 前 就 执行 一 次 ,以 后 不 再 执行 ,除非 你 重新 加 载 
页 面 。 而 函数 则 可 根据 用 户 需要 在 页 面 中 多 次 调用 ,完成 多 次 执行 操作 ,可 实现 页 面 级 的 代 
码 共享 。 例 如 上 例 中 alert 仅 执 行 一 次 。HTML 页 面 中 可 有 多 个 “二 script> 达 /script>” 
程序 段 ,程序 段 的 前 后 关系 以 及 程序 段 与 HTML 标记 的 前 后 关系 应 有 逻辑 关系 。 下 例 中 
第 一 程序 段 不 能 放 到 二 A 二 标记 后 , 想 想 为 什么 ? 


< htm]l >< head ><title> 脚 本 位 置 的 问题 </title></head> 
< script type = "text/javascript"> 


var Num = 9; // 此 处 定义 的 变量 Nun 将 直接 传递 给 单 击 超 链 接 的 事件 处 理 函 数 ClacMe 
var Str = "How much ? "; // 此 处 的 Str 将 传递 给 后 面 的 脚本 程序 使 用 
</script> 
<body> 
<R id= "myAlink" HREF =" 井 "onclick = "CalcMe(Num);"> 计 算 </A> 
</body> 


< script type = "text/javascript"> 
function CalcMe(n) 
{ n= Num*x90; alert(Str+n) } // 最 终 显示 "How much ? 810" 
</script > 
</html > 


在 HTML 4.0 版 本 中 ,W3C 建议 指定 脚本 语言 时 用 type 属性 替代 language 属性 , 例 
如 上 例 中 二 script type 一 "text/javascript" 二 。 

(2) 将 JavaScript 程序 以 扩展 名 ". js" 单 独 存放 ,再 使 用 二 script src 王 "* .js 二 "嵌入 到 
HTML 文件 中 ,以 期 实现 代码 共享 。 

【 例 4.2】 HTML 文件 中 使 用 脚本 语言 示例 2。 


< htm]l >< head > 

<meta http— equiv = "Content - Type" content = "text/html; charset = gb2312"> 
<title> HTML 中 如 何 使 用 script 语言 -- 设置 主页 实例 </title> 

</head> 

< script src = "sethomepage. js" language = "javascript"></script> 

<body> 

<A id= "myAlink" HREF = "并 ”onclick = "Set_HomePage( );"> 设 为 主页 </A> 
</body> 

</htm] > 


sethomepage. js 文件 内 容 : 


function Set_HomePage() 


{ 
myAlink. style. behavior = 'url( # default# homepage)'; 
myAlink. setHomePage( 'http://www. cqu. edu. cn/'); 
return false; 

} 


(3) 直接 在 HTML 标记 内 添加 脚本 ,例如 例 4. 2 可 改 成 : 


<html> 

<head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312"> 

<title> HTML 中 如 何 使 用 script 语言 ~- 设置 主页 实例 </title> </head> 

<body> 

<A HREF ="#" onclick = "javascript:this. style.behavior = 'url( #default# homepage)'; 
this. setHomePage( 'http://www. cqu. edu. cn/'); return false; ;"> 设 为 主页 </A> 
</body></html > 
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其 中 this 指 代 当 前 标记 元 素 对 象 。 当 实现 功能 较为 简单 ,而且 代码 不 需要 共享 时 ,可 采用 
此 种 方法 书写 脚本 程序 。 

2. 数据 类 型 

JavaScript 有 3 种 数据 类 型 : 字符 型 .数值 型 和 布尔 型 

1) 字符 型 

字符 串 数据 类 型 用 来 表示 JavaScript 中 的 文本 。 脚 本 中 的 字符 串 文 本 放 在 一 对 匹配 的 
单 引 号 或 双 引 号 中 。 字 符 串 中 可 以 包含 双 引 号 ,该 双 引 号 两 边 需 加 单 引 号 ,例如 '4"5', 也 可 
以 包含 单 引号 ,该 单 引 号 两 边 需 加 双 引 号 ,例如 "1'5"。 

【 例 4.3】 下 面 是 字符 串 的 示例 。 

"Happy am I; from care I free!" 

"Avast, ye lubbers!" roared the technician. 

"a2" 

JavaScript da C++ 的 char)。 要 表示 JavaScript 中 的 单个 
字符 ,应 创建 一 个 只 包含 一 个 字符 的 字符 串 。 包 含 0 个 字符 ("") 的 字符 串 是 空 (0 长 度 ) 字 
符 串 。 

2) 数值 型 

在 JavaScript 中 ,整数 和 浮 点 值 没 有 差别 ; JavaScript 数值 可 以 是 其 中 任意 一 种 
(JavaScript 内 部 将 所 有 的 数值 表示 为 浮 点 值 ) 。 

整 型 值 可 以 是 正 整数 、 负 整数 和 0。 可 以 用 十 进 制 \ 八 进 制 和 十 六 进 制 来 表示 。 在 
JavaScript 中 数字 大 多 是 用 十 进 制 表示 的 。 浮 点 值 为 带 小 数 部 分 的 数 , 也 可 以 用 科学 计数 
法 来 表示 。 相 关 示 例如 表 4-1 所 示 。 


表 4-1 JavaScript 中 数据 类 型 示例 


数 字 描 述 等 价 十 进 制 数 

3. 45e2 浮 点 数 345 

42 整数 42 

378 十 进 制 整数 378 

0377 八进制 整数 (以 0 开头 ) 255 

0. 0001 浮 点 数 0. 0001 

Oxff 十 六 进 制 整数 (以 0 和 x 开头 ) 255 

0x3. 45e2 错误 。 十 六 进 制 数 不 能 有 小 数 部 分 NVA( 编 译 错误 ) 
3) 布尔 型 


Boolean( 布 尔 ) 数 据 类 型 只 有 两 个 值 , 它 们 是 文字 true 和 false。Boolean 值 是 一 个 真 
值 , 它 表示 一 个 状态 的 有 效 性 (说 明 该 状态 为 真 或 假 ) 。 
脚本 中 的 比较 通常 得 到 一 个 Boolean 结果 。 考 虑 下 一 行 JavaScript 代码 : 


Y= (x == 2000); 


这 里 要 比较 变量 x 的 值 是 否 与 数字 2000 相等 。 如 果 相 等 ,比较 的 结果 为 Boolean 值 true， 
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并 将 其 赋 给 变量 y。 如 果 x 与 2000 不 等 , 则 比较 的 结果 为 Boolean 值 false。 

另外 ,在 JavaScript 中 数据 类 型 null 只 有 一 个 值 : null, 其 含义 是 “无 值 ” 或 “无 对 象 ”。 
当 某 个 变量 返回 undefined 值 表示 对 象 属性 不 存在 或 声明 了 变量 但 从 未 赋值 。 

3. 常量 和 变量 

1) 常量 

JavaScript 中 的 常量 以 直接 量 的 形式 出 现 , 即 在 程序 中 直接 引用 ,如 “欢迎 ”、26 等 。 常 
量 值 可 以 为 整 型 . 实 型 .逻辑 型 及 字符 串 型 。 


2) 变量 

(1) 变量 声明 。 使 用 变量 之 前 应 先进 行 声明 。 可 以 使 用 var 关键 字 来 进行 变量 声明 。 
var count; // 单 个 变量 声明 

var count, amount, level; // 多 个 变量 声明 


var count = 0, amount = 100; // 变 量 声明 和 初始 化 


如 果 在 var 语句 中 没有 初始 化 变量 ,变量 自动 取 JavaScript 值 undefined 。 

(2) 变量 命名 。JavaScript 是 一 种 区 分 大 小 写 的 语言 。 因 此 变量 名 称 myCounter 和 变 
量 名称 mYCounter 是 不 一 样 的 。 变 量 的 名 称 可 以 是 任意 长 度 的 。 创 建 合法 的 变量 名 称 应 
遵循 如 下 规则 : 

第 一 个 字符 必须 是 一 个 ASCII 码 ( 大 小 写 均 可 ) ,或 一 个 下 划 线 (_) ,注意 第 一 个 字符 不 
能 是 数字 ; 后 续 的 字符 必须 是 字母 ,数字 或 下 划 线 ; 变量 名 称 一 定 不 能 是 保留 字 。 

【 例 4.4】 合法 变量 名 称 示 例 。 


_pagecount 

Part9 

Number_Items 

【 例 4.5】 无 效 变量 名 称 示例 。 

99Balloons // 不 能 以 数字 开头 
Smith&Wesson //"g" 符 号 不 能 用 于 变量 名 


当 要 声明 一 个 变量 并 进行 初始 化 ,但 又 不 想 指定 任何 特定 值 ,可 以 赋值 为 JavaScript 
值 null。 
【 例 4.6】 null 赋值 示例 。 


< script language = "javascript"> 

var bestAge = null; 

Var muchToo0ld = 3 * bestAge; 

//alert 实现 了 在 浏览 器 中 弹出 消息 对 话 框 的 功能 


alert(bestAge); // 消 息 框 显示 bestAge 为 nu11 
alert(muchToo01d); // 消 息 框 显 示 muchToo0ld 的 值 为 0 
</script> 


如 果 声 明了 一 个 变量 但 没有 对 其 赋值 ,该 变量 存在 ,其 值 为 JavaScript 值 undefined。 
【 例 4.7】 undefined 赋值 示例 。 
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< script language = "javascript"> 
Var currentCount; 
var finalCount = 1 * currentCount; 


alert(currentCount); // 消 息 框 显示 currentCount 为 undefined 
alert(finalCount); // 消 息 框 显示 finalCount 的 值 为 NaN (Not a Number) 
</script > 


对 比例 4.6 和 例 4.7 可 以 看 出 JavaScript 中 null 和 undefined 的 主要 区 别 , 即 null 的 
操作 如 同 数 字 0, 而 undefined 的 操作 如 同 特殊 值 NaN (不 是 一 个 数字 )。 但 对 null 值 和 
undefined 值 作 比较 总 是 相等 的 。 

JavaScript 支持 隐 式 声明 , 即 可 以 不 用 var 关键 字 声明 变量 ,例如 ， 


noStringAtAll = ""; // 隐 式 声明 变量 noStringAtAll 
不 能 使 用 未 经 过 声明 的 变量 。 例 如 : 

var volume = length * width; // 错 误 !length 和 width 不 存在 
4. 运算 符 和 表达 式 


1) 运算 符 
JavaScript 运算 符 包括 算术 、 人 逻辑 、 位 、 赋 值 以 及 其 他 运算 符 。 运 算 符 描述 如 表 4-2 


表 4-2 运算 符 描述 
算术 运算 符 逻辑 运算 符 位 运算 符 赋值 运算 符 其 他 运算 符 
描述 符号 描述 符号 描述 符号 描述 符号 描述 符号 
负 值 = 逻辑 非 ! 按 位 取 反 | 一 赋值 加 删除 delete 
递增 二 十 -| 处 于 < 按 位 左 移 | < 二 | 运算 赋值 | op= |typeof typeof 
递减 二 二 = 站 于 > 按 位 右 移 | 二 void void 
乘法 * 小 于 等 于 | 二 = | 无 符号 右 移 | 之 之 > instance of |instance of 
除法 / 大 于 等 于 Sai 按 位 与 & new new 
取 模 运算 | % 等 于 ( 恒 等 )|=== | 按 位 异 或 |~ in in 
加 法 十 不 等 于 ! = | 按 位 或 | 
减法 ue 逻辑 与 &. 
逻辑 或 山 
条 件 运算 符 | ?: 
逗号 ， 
严格 相等 “| 一 二 一 
非 严格 相等 | ! == 


相等 ( 恒 等 )“ 二 二 ”与 严格 相等 “二 二 二 ”的 区 别 在 于 恒 等 运 算 符 在 比较 前 会 强制 转换 不 
同类 型 的 值 。 例 如 , 恒 等 对 字符 串 "1" 与 数值 1 的 比较 结果 将 为 true。 而 严格 相等 不 强制 转 
换 不 同类 型 的 值 ,因此 它 认 为 字符 串 "1" 与 数值 1 不 相同 。 

字符 串 .数值 和 布尔 值 是 按 值 比较 的 。 如 果 它 们 的 值 相 同 , 则 比较 结果 为 相等 。 对 象 
(包括 Array、Function、String、Number、Boolean、Error、Date 以 及 RegExp 对 象 ) 按 引用 比 
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较 。 即 使 这 些 类 型 的 两 个 变量 具有 相同 的 值 ,也 只 有 在 它们 正好 为 同一 对 象 时 比较 结果 才 
为 true。 
【 例 4.8】 比较 运算 符 示 例 。 


< script language = "javascript"> 

// 具 有 相同 值 的 两 个 基本 字符 串 . 

Var stringl = "Hello", string2 = "Hello"; 

// 具 有 相同 值 的 两 个 String 对 象 . 

var StringObject1l = new String(stringl), StringObject2 = new String(string2); 
var myBool = (stringl == string2); 


alert(myBool); // 消 息 框 显示 比较 结果 为 true 
var myBool = (StringObjectl == StringObject2); 
alert(myBool); // 消 息 框 显 示 比 较 结 果 为 false 


// 要 比较 String 对 象 的 值 , 用 tostring() 或 者 valueof( ) 方 法 
var myBool = (StringObject1. valueOf() == StringObject2); 
alert(myBool); // 消 息 框 显 示 比 较 结 果 为 true 
</script > 


2) 表达 式 

JavaScript 的 表达 式 由 常量 、 变 量 、 运 算 符 和 表达 式 组 成 ,有 以 下 3 类 表达 式 。 

。 算 术 表 达 式 。 值 为 一 个 数值 型 值 ,例如 : 5 十 a 一 x。 

。 字符 串 表 达 式 。 值 为 一 个 字符 串 ,例如 : "字符 串 1" 十 str。 

。 布尔 表达 式 。 值 为 一 个 布尔 值 ,例如 : (x 二 一 y)&& COy>> 一 5)。 

JavaScript 解释 器 具有 数据 类 型 强制 转换 功能 。 对 于 强 类 型 语言 ,如 C++、C# 等 ,如 果 
表达 式 不 经 过 强制 转换 就 试图 对 两 个 不 同 的 数据 类 型 (如 一 个 为 数字 , 另 一 个 为 字符 串 ) 执 
行 运算 ,将 产生 错误 结果 。 但 在 JavaScript 中 情况 就 不 同 了 。 

JavaScript 是 一 种 自由 类 型 的 语言 。 它 的 变量 没有 预定 义 类 型 。JavaScript 变量 的 类 
型 取决 于 它 所 包含 值 的 类 型 , 即 赋 给 变量 的 值 为 小 数 , 则 变量 为 浮 点 型 。 在 JavaScript 中 ， 
可 以 对 不 同类 型 的 值 执行 运算 ,不 必 担 心 JavaScript 解释 器 产生 异常 。JavaScript 解释 器 自动 
将 数据 类 型 强制 转换 为 另 一 种 数据 类 型 ,然后 执行 运算 。 数 据 类 型 转换 过 程 如 表 4-3 所 示 。 


表 4-3 数据 类 型 转换 


运 算 结 果 例子 
数值 与 字符 串 相 加 将 数值 强制 转换 为 字符 串 55 二 "45"-="5545" 
布尔 值 与 字符 串 相 加 将 布尔 值 强制 转换 为 字符 串 true 十 "45"— " true45" 


数值 与 布尔 值 相 加 将 布尔 值 强制 转换 为 数值 。true 一 1; false==0 55 * true>55 


要 想 显 式 地 将 字符 串 转换 为 整数 .使 用 parseInt 方法 。 要 想 显 式 地 将 字符 串 转换 为 数 
字 , 使 用 parseFloat 方法 。 

【 例 4.9】 显 式 地 将 字符 串 转换 为 数值 。 

55 + parseInt("45") 一 100 55 + parseInt("45AB") 一 100 


55 + parseInt("A45B") 一 NaN 55 + parseInt("0xFF") 一 310 
55 + parseFloat("45.05") 一 100.05 (55 == '55') 一 true 
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5. 函数 


函数 为 程序 设计 人 员 提 供 了 实现 模块 化 的 工具 。 通 常 根 据 所 要 完成 的 功能 ,将 程序 划 
分 为 一 些 相 对 独立 的 部 分 ,每 一 部 分 编写 一 个 函数 ,从 而 使 各 部 分 充分 独立 ,任务 单一 ,结构 
清晰 。JavaScript 函数 定义 语法 格式 为 : 

function 函数 名 (形式 参数 表 ){ 


// 函 数 体 


函数 调用 语法 格式 如 下 : 
函数 名 ( 实 参 表 ) 


当 函 数 没 有 返回 值 时 ,可 以 不 使 用 return 语句 , 若 使 用 return, 也 只 能 使 用 不 带 参 数 的 
形式 ; 当 函 数 有 返回 值 时 ,使 用 return 语句 返回 函数 值 ,格式 为 : 


return 表达 式 
或 
return (表达 式 ) 


JavaScript 支持 两 种 函数 : 语言 内 部 函数 和 自 定义 函数 。 

JavaScript 语言 包含 很 多 内 部 函数 ,例如 数学 函数 sin、cos、tan、sqrt、floor 等 ,字符 串 处 
理 函 数 indexOf lastIndexOf length、 replace、 split, substring toUpperCase, toLowerCase 
等 。 某 些 函 数 可 以 操作 表达 式 和 特殊 字符 ,例如 非常 有 用 的 内 部 函数 eval()。 该 函数 可 以 
对 以 字符 串 形 式 表示 的 任意 有 效 的 JavaScript 代码 求 值 。eval() 函数 有 一 个 参数 ,该 参数 
就 是 想 要 求 值 的 代码 。 

【 例 4.10】 使 用 内 部 函数 eval() 示 例 。 


< script language = "javascript"> 

var iNumber = "100"; 

Var anExpression = "(16 * 9 % 7)"; 

var total = eval(anExpression + "/" + iNumber); // 等 同 于 求 (16 * 9%7)/100 的 值 
alert(total); // 将 变量 total 赋值 为 0.04 
</script > 


在 必要 的 时 候 , 可 以 创建 自 定义 函数 。 函 数 的 定义 中 包含 了 一 个 函数 语句 和 一 个 
JavaScript 语句 块 。 
【 例 4.11】 设计 一 个 显示 指定 数 的 阶乘 值 的 程序 。 


< html >< head><title> 函 数 示例 </title></head> 

< script language = "JavaScript"> 

function factor(num) 

{ vari,fact=1; 
for (i=1;i<num+1;i++) fact = ix fact; 
return fact; 

</script > 

<body> 

< script language = "JavaScript"> 


// 调 用 factor 函数 

alert("5 的 阶乘 = "+ factor(5)); // 显 示 "5 的 阶乘 = 120" 
</script > 

</body></html > 


使 用 函数 要 注意 以 下 几 点 : (1) 函 数 定义 位 置 。 语 法 上 允许 在 HTML 文件 的 任意 位 置 
定义 和 调用 函数 ,但 建议 在 文件 头 部 定义 所 有 的 函数 ,这 样 可 以 保证 函数 定义 先 于 其 调用 请 
句 载 入 浏览 器 ,避免 出 现 调用 函数 时 由 于 函数 定义 尚未 载 和 浏览 器 而 引起 的 未 定义 错误 。 
(2) 函数 参数 。 在 定义 函数 时 ,可 以 给 出 一 个 或 多 个 形式 参数 ; 而 调用 函数 时 , 却 不 一 定 要 
给 出 同样 多 个 参数 。 在 JavaScript 中 ,系统 变量 arguments. length 中 将 保存 调用 者 给 出 的 
实 参 个 数 。(3) 变 量 的 作用 域 。 在 函数 内 用 var 保留 声明 的 变量 是 局 部 变量 ,作用 域 仅 局 限 
于 该 函数 ; 在 函数 外 用 var 声明 的 变量 是 全 局 变量 ,作用 域 是 整个 HTML 文件 。 函 数 内 未 
用 var 声明 的 变量 也 是 全 局 变量 。 局 部 变量 与 全 局 变量 同名 时 ,其 操作 互 不 影响 。 

【 例 4.12】 设计 一 个 JavaScript 函数 默认 求 1 十 2 十 … 十 1000, 否 则 按 指定 开始 值 结 
束 值 求 和 。 


<html >< head > 

< script language = "javascript"> 

function sum(StartVal, EndVal){ 

var ArgNum = sum. arguments. length; 

var i,s=0; 

if (ArgNum == 0) { StartVal = 1;EndVal = 1000;} 

else if (ArgNum == 1) EndVal = 1000; 

for (i= StartVal;i<= EndVal;i++) s+ =i; 

return s; 

} 

</script > 

</head> 

<body> 

< script language = "javascript"> 

//document. write 表示 在 浏览 器 中 输出 文本 

document. write(" 不 给 出 参数 调用 函数 sum:", sum(),"<br>"); 
document. write(" 给 出 一 个 参数 调用 函数 sum:",sum(500),"<br>"); 
document. write(" 给 出 两 个 参数 调用 函数 sum:",sum(1,50),"<br>"); 
</script> 

</body></html > 


在 浏览 器 中 显示 结果 如 图 4-1 所 示 。 
6. 流程 控制 

1) 让 条 件 语句 

语法 格式 为 : 

if( 条 件 ){ 

执行 语句 1 

} 


else{ 
执行 语句 2 
} 
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下 E:vhtal\3-9.htal - Microsoft Internet Explorer 回回 加 
; 文件 FF) 编辑 到 ) 查看 0) 收 癌 由 工具 (TD) 帮助 吕 ) 万 


ea 加 上 的 Pa 不 tmx @lS-S 


5 地址) | 各 .Ahtnl\3-9 html 回回 天 


不 给 出 参数 调用 函数 sum:500500 
给 出 一 个 参数 调用 函数 sum:375750 
给 出 两 个 参数 调用 函数 sum:1275 


4-1 例 4.12 运行 结果 


其 中 条 件 可 以 是 逻辑 或 关系 表达 式 ,车 为 true, 则 执行 语句 1; 否则 执行 语句 2。 车 寺 后 的 
语句 有 多 行 , 则 必须 使 用 花 括 号 将 其 括 起 来 。 

让 诸 句 可 以 翌 套 ,格式 为 : 

if( 条 件 1) 执 行 语句 1; 


else if( 条 件 2) 执 行 语句 2; 
else if( 条 件 3) 执 行 语句 3; 


else 执行 语句 ， 


在 这 种 情况 下 ,每 一 级 的 条 件 表述 式 都 会 被 计算 , 若 为 真 , 则 执行 其 相应 的 语句 ,和 否则 执 
行 else 后 的 语句 。 

2) for 循环 语句 

请 法 格式 为 ， 

for( 初 始 设置 ; 循环 条 件 ; 更 新 部 分 ){ 

语句 集 

} 

初始 设置 告诉 循环 的 开始 位 置 ,必须 赋予 变量 的 初 值 ; 循环 条 件 用 于 判别 循环 停止 时 
的 条 件 。 若 条 件 满 足 , 则 执行 循环 体 ,否则 跳出 。 更 新 部 分 定义 循环 控制 变量 在 每 次 循环 时 
按 什么 方式 变化 。 初 始 设置 .循环 条 件 .更 新 部 分 之 间 ,必须 使 用 分 号 分 隔 。 

for 循环 的 另 一 种 用 法 是 针对 某 对 象 集合 中 的 每 个 对 象 或 某 数组 中 的 每 个 元 素 ,执行 一 
个 或 多 个 语句 。 

for (变量 in 对 象 或 数组 ) { 

语句 集 

} 

3) while 循环 语句 

语法 格式 为 : 

while( 条 件 ){ 

语句 集 


第 4 章 


当 条 件 为 真 时 ,反复 执行 循环 体 语 句 , 否 则 跳出 循环 体 。 循 环 体 中 必须 设置 改变 循环 条 
件 的 操作 ,使 之 离 循环 终止 更 近 一 步 。 
for 与 while 两 种 语句 都 是 循环 语句 ,使 用 for 语句 在 处 理 有 关 数 字 时 更 易 看 人 懂 , 也 较 紧 
资 ; 而 while 循环 更 适合 复杂 的 语句 。 
4) break 和 continue 语句 
与 C++ 语言 相同 ,使 用 break 语句 可 使 得 循环 从 for 或 while 中 强制 跳出 ,而 continue 
使 得 跳 过 循环 内 剩余 的 语句 ,并 没有 跳出 循环 体 。 
5) try...catch...finally 语句 
该 语句 实现 JavaScript 错误 处 理 。 语 法 为 : 
try { 
测试 语句 集 } 
catch(exception){ 
错误 处 理 语 句 集 } 
finally { 
无 错误 处 理 语句 集 } 


7. 事件 驱动 及 事件 处 理 

事件 (events) 是 指 对 计算 机 进行 一 定 的 操作 而 得 到 某 一 结果 的 行为 ,例如 将 鼠标 移 到 
某 个 超 链 接 上 ,. 单 击 鼠 标 按钮 等 都 是 事件 。 由 鼠标 或 热 键 引 发 的 一 连 串 程序 的 动作 , 称 为 事 
件 驱动 (event driver) 。 对 事件 进行 处 理 的 程序 或 函数 , 称 为 事件 处 理 程序 (event handler) 。 

在 HTML 文件 中 ,可 用 支持 事件 驱动 的 JavaScript 语言 编写 事件 处 理 程序 。 用 
JavaScript 进行 事件 编程 主要 用 于 两 个 目的 : 

。 验证 用 户 输入 窗 体 的 数据 ; 

。 增 加 页 面 的 动感 效果 。 

一 个 HTML 元 素 能 够 响应 鼠标 和 键盘 的 事件 如 表 4-4 所 示 。 某 些 鼠 标 事件 虽 事件 名 
称 不 一 样 , 但 响应 效果 几乎 一 样 ,用 户 可 根据 实际 需要 选择 某 个 事件 进行 编程 。 


表 4-4 鼠标 事件 和 键盘 事件 列表 


事件 名 称 说 明 事件 名 称 说 明 事件 名 称 说 明 

onclick 鼠标 左 键 单 击 ondblclick 鼠标 左 键 双击 onmouseup tn 标 左 键 
4 按 下 鼠标 左 键 或 鼠标 指针 在 该 鼠标 指针 离开 
onmousedown 右键 onmouseover HTML 元 素 经 过 onmouseou 该 HTML 元 素 
当 用 鼠标 或 键盘 
onmousemove eect onmousewheel | 滚动 鼠标 滚轮 onfocus 使 该 HTML 元 

素 得 到 焦点 时 

onkeypress 击 键 操作 发 生 时 | onkeyup 松 开 某 个 键 时 onkeydown 按 下 某 个 键 时 
tala 当 文本 框 的 内 容 et 当 用 鼠标 或 键盘 i HTML 元 素 失 

oe 发 生 改变 的 时 候 | 选中 文本 时 | 去 焦点 时 


【 例 4. 13】 鼠标 单 击 事件 。 
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< html >< body> 

< form> 

< Input type = "button" Value = "鼠标 响应 "onclick = "alert( 这 是 一 个 例子 ')"> 
</form> 

</body></html > 


当 鼠 标 单 击 “ 和 鼠标 响应 ”按钮 的 时 候 , 自 动弹 出 一 个 alert 对 话 框 。 试 着 将 onclick 事件 
名 称 换 成 其 他 事件 名 称 ,查看 对 应 事件 响应 结果 。 从 该 例 可 知 ,事件 编程 的 语法 格式 为 ， 


事件 名 称 = 函数 名 或 处 理 语句 或 函数 


例 4. 14、 例 4.15 和 例 4. 16 分 别 演示 了 JavaScript 事件 编程 的 3 种 方法 ,它们 的 执行 效 
果 完 全 相同 ,用 户 在 文本 框 中 输入 数字 或 字符 后 ,可 单 击 “ 检 查 ” 按 钮 检查 输入 的 字符 串 是 否 
全 由 数字 组 成 ,将 显示 true 或 false。 注 意 我 们 为 文本 框 设置 属性 ID 为 mytext, 要 取 到 文 
本 框 用 户 输 入 的 内 容 , 用 mytext. value 即 可 。 

例 4. 15 的 事件 编程 可 用 于 执行 代码 较 少 的 情况 。 当 执行 代码 较 多 情况 下 采用 例 4. 14 
的 事件 编程 方式 ,可 读 性 好 ,便于 程序 维护 和 代码 重用 。 注 意 在 例 4. 16 中 ,鼠标 单 击 不 能 用 
oncjlick ,只 能 用 onmousedown 或 onmouseup, 且 JavaScript 脚本 程序 必须 放 在 按钮 和 文本 
框 定义 之 后 ,否则 就 会 出 现 没 有 事先 定义 而 在 脚本 程序 中 引用 的 错误 。 例 4. 14 中 的 脚本 程 
序 放 在 按钮 和 文本 框 定义 前 或 后 均 可 。 

【 例 4.14】 编写 鼠标 单 击 事件 (函数 名 )。 


<html> 
< head>< title> 检 查 输入 的 字符 串 是 否 全 由 数字 组 成 </title></head> 
< script language = "javascript"> 
function checkNum( str) 
{ ”var TestResult = ! 八 D/.test(str);  // 使 用 正则 表达 式 测试 字符 串 是 否 全 由 数字 组 成 
alert(TestResult); 
} 
</script > 
<body> 
< input id = "mytext" type= "text" value= '12332> 
< input id = "mybut" type = "button" value = "检查 " onclick = "checkNum(mytext. value)"> 
</body></html > 


【 例 4.15】 编写 鼠标 单 击 事件 (处 理 语句 )。 


<html> 

<head>< title> 检 查 输入 的 字符 串 是 否 全 由 数字 组 成 </title></head> 

<body> 

< input id= "mytext" type= "text" value= '12332> 

< input id = "mybut" type = "button" value = "检查 " onclick = "javascript:var TestResult = ! 八 
D/.test(mytext.value); /x 使 用 正则 表达 式 测试 字符 串 * / alert (TestResult);"> 
</body></html> 


【 例 4. 16】 鼠标 单 击 ( 函 数 ) 。 


<html> 

<head>< title > 检查 输入 的 字符 串 是 否 全 由 数字 组 成 </title></head> 

<body> 

< input id = "mytext" type = "text" value = '12332> 

< input id = "mybut" type = "button" value = "检查 "> 

< Script language = "javascript"> 

mybut. onmousedown = function() { /x mybut 为 按钮 的 ID*/ 
var TestResult = ! 八 D/.test(mytext.value); ” /* 使 用 正则 表达 式 测试 字符 串 是 否 全 是 数字 * / 
alert(TestResult); 


; 
</script > 
</body></html> 


【 例 4. 17】〗 onchange、onselect、onfocus 事件 例子 。 

onchange 事件 是 当 某 个 HTML 元 素 ( 例 如 文本 框 ) 的 内 容 改变 的 时 候 发 生 的 事件 ; 
onselect 事件 就 是 当 某 个 HTML 元 素 ( 例 如 文本 框 ) 的 文本 内 容 被 选中 的 时 候 发 生 的 事件 ; 
onfocus 事件 就 是 当 光 标 落 在 某 个 HTML 元 素 , 使 它 得 到 焦点 的 时 候 发 生 的 事件 。 

此 例 中 , 当 在 文本 框 Testl 中 输入 内 容 或 删除 某 个 字符 后 ,一 旦 失去 焦点 就 会 自动 弹出 
一 个 “文本 发 生变 化 1”alert 框 。 当 在 文本 框 Test2 中 用 键盘 或 鼠标 选中 文本 的 时 候 就 会 自 
动弹 出 “我 被 选中 !1”alert 框 。 当 用 鼠标 选中 文本 框 Test3 的 时 候 ,触发 onfocus 事件 ,弹出 
“Test3 得 到 焦点 1”alert 框 。 


<html ><body> 

< form> 

< input id = "Test1l" type = "text" value = "Test” onChange = 'alert(" 文 本 发 生变 化 !") > 
< input id = "Test2" type = "text" value = "Test" onSelect = 'alert(" 我 被 选中 !") > 

< input id = "Test3" type = "text" value = "Test1" onFocus = 'alert("Test3 得 到 焦点 !")> 
<br> 

< input id = "Test4" type = "text" value = "Test2" onFocus = 'alert("Test4 得 到 焦点 !")> 
</form> 

</body></html > 


4.1.3 JavaScript 对 象 编程 技术 

1. JavaScript 的 对 象 

JavaScript 并 不 完全 支持 面向 对 象 的 程序 设计 方法 ,例如 它 没 有 提供 抽象 .继承 .封装 
等 面向 对 象 的 基本 属性 。 但 它 支 持 开 发 对 象 类 型 及 根据 对 象 产生 一 定数 量 的 实例 ,同时 还 
支持 开发 对 象 的 可 重用 性 ,实现 一 次 开发 多 次 使 用 的 目的 。 

JavaScript 中 的 对 象 是 由 属性 (properties) 和 方法 (methods) 两 个 基本 的 元 素 构成 的 。 
在 JavaScript 中 使 用 一 个 对 象 可 采用 以 下 3 种 方式 获得 : 

。 引用 JavaScript 内 置 对 象 ,如 Date Math String 等 ; 

。 用 户 自 定义 对 象 ; 
引用 浏览 器 对 象 ,下 一 节 将 专门 介绍 。 
2. JavaScript 常用 的 内 置 对 象 
1) Array 对 象 
可 用 Array 对 象 创 建 数组 。 数 组 是 若干 元 素 的 集合 ,每 个 数组 都 用 一 个 名 字 作为 标识 。 
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JavaScript 中 没有 提供 明显 的 数组 类 型 ,可 通过 JavaScript 内 建 对 象 Array 或 使 用 自 定 义 对 
象 的 方式 创建 数组 对 象 。 

【 例 4. 18〗 使 用 JavaScript 内 建 对 象 Array 生成 一 个 新 的 数组 。 通 过 new 保留 字 来 
创建 数组 对 象 ,其 语法 格式 为 : var 数组 名 二 new Array( 数 组 长 度 值 ) 。 


var theMonths = new Array(6);  // 创 建 数组 对 象 theMonths, 具有 6 个 数组 元 素 
theMonths[0] = "Jan"; 
theMonths[1] = "Feb"; 
theMonths[2] = "Mar"; 
theMonths[3] = "Apr"; 
theMonths[4] = "May"; 
theMonths[5] = "Jun"; 


下 面 的 示例 与 上 一 个 示例 是 等 价 的 。 
var theMonths = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun"); 


数组 创建 后 ,可 通过 [ 来 访问 数组 元 素 , 用 数组 对 象 的 属性 length 可 获取 数组 元 素 的 
个 数 。 当 向 用 关键 字 Array 生成 的 数组 中 添加 元 素 时 ,JavaScript 自动 改变 属性 length 的 
值 。JavaScript 中 的 数组 索引 总 是 以 0 开始 ,而 不 是 1。 例如 : 


var my_array = new Array(); // 创 建 动态 数组 
for (i = 0; i<10; i++) 
{ 
my_array[i] = i; 
} 
x = my_array[4]; 
alert("x= "+x); // 输 出 4 
alert(my_array. length); // 输 出 数组 的 元 素 个 数 为 10 


【 例 4.19】 使 用 自 定义 对 象 的 方式 创建 数组 对 象 。 通 过 function 定义 一 个 数组 ,其 中 
arrayName 是 数组 名 ,size 是 数组 长 度 , 通 过 this[i] 为 数组 赋值 。 定 义 对 象 后 还 不 能 马上 使 
用 ,还 必须 使 用 new 操作 符 创建 一 个 数组 实例 MyArray。 一 旦 给 数组 赋予 了 初 值 后 ,数组 
中 就 具有 真正 意义 的 数据 ,以 后 就 可 以 在 程序 设计 过 程 中 直接 引用 。 


< script language = "javascript"> 

function arrayName( size){ 

this. length= size; 

for(var i=0; i<= size;i++) this[i] =0; 
return this; 

} 

var MyArray = new arrayName(10); 

MyArray[0] = 1; MyArray[1] = 2;MyArray[2] = 3; 
MyArray[3] = 4;MyArray[ 4] = 5;MyArray[5] = 6; 
MyArray[6] = 7;MyArray[7] = 8;MyArray[8] = 9; 
MyArray[9] = 10; 

alert(MyArray[7]); // 输 出 8 
</script > 


2) String 对 象 

在 JavaScript 中 ,可 以 将 字符 串 当 作对 象 来 处 理 。 创 建 String 对 象 实例 ,格式 为 ; 

[var] String 对 象 实例 名 = 字符 串 值 ; 

String 对 象 只 有 一 个 属性 , 即 length 属性 ,包含 了 字符 串 中 的 字符 数 ( 空 字符 串 为 0)， 
它 是 一 个 数值 ,可 以 直接 在 计算 中 使 用 。 

String 对 象 内 置 方法 有 30 多 种 。 例 如 anchor link substring ,indexOf ,replace 等 。 

【 例 4. 20〗 String 对 象 的 建立 和 使 用 。 


< script language = "javascript"> 

// 设 置 变量 howLong 为 11 

var howLong = "Hello World". length; 

// 锚 点 方法 anchor(). 使 用 anchor 作用 与 Html 中 (A Name ="") 一 样 
// 格 式 为 : string.anchor(anchorName) 

// 创 建 一 个 名 为 start 的 锚 点 ,该 处 显示 文字 "开始 " 

var astr = "开始 "; 

Var aname = astr. anchor( "start"); 

document. write(aname); 


// 超 链接 方法 link( ). 用 于 创建 一 个 超 链 接 , 与 HTML 中 (A href = "") 作 用 相同 
// 格 式 为 :string. link(URL) 

var hstr = "重庆 大 学 "; 

var hname = hstr. link("http://www. cqu. edu. cn" ); 

document. write( hname); 


// substring() 方 法 : substring(start, end). 它 返回 字符 串 的 一 部 分 ,该 字符 串 包含 从 start 
// 直 到 end( 不 包含 end) 的 子 字 符 串 

//substring 方法 使 用 start 和 end 两 者 中 的 较 小 值 作为 子 字符 串 的 起 始点 .例如 ， 
//strvar. substring(0，3) 和 strvar. substring(3, 0) 将 返回 相同 的 子 字符 串 

// 如 果 start 或 end 为 NaN 或 负数 ,那么 它 将 被 替换 为 0 

// 子 字符 串 的 长 度 等 于 start 和 end 之 差 的 绝对 值 .例如 ,在 strvar. substring(0, 3) 和 
//strvar. substring(3, 0) 中 ,返回 的 子 字符 串 的 长 度 为 3 


// 字 符 搜索 : indexOf[ str, fromIndex] 


Strl = "0123456789"; // 创 建 一 个 string 对 象 Strl 
Str2 = "2345"; // 创 建 一 个 string 对 象 Str2 

var aChunk = Strl.substring(4, 7); // 将 achunk 设 为 "456" 

document. write("aChunk = " + aChunk); 

found= Strl. indexOf(Str2); // 返 回 Str2 在 Strl 中 的 起 始 位 置 


// 创 建 字符 串 对 象 的 另外 一 种 方法 是 用 new 

var mystr = new String("<br> 重 庆 大 学 < br >"); 
document. write(mystr. link("http://www. cqu. edu. cn" )); 
</script > 


3) Math 对 象 

Math 对 象 提 供 了 常用 的 数学 函数 和 运算 ,如 三 角 函 数 、 对 数 函 数 、 指 数 函 数 等 。Math 
中 提供 了 6 个 属性 ,它们 是 : 常数 E; 以 10 为 底 的 自然 对 数 LN10; 以 2 为 底 的 自然 对 数 
LN2; 圆周 率 PI, 近 似 值 为 3. 142; 1/2 的 平方 根 SQRT1-2; 2 的 平方 根 为 SQRT2; 以 10 
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为 底 ,E 为 对 数 的 LOG10E; 以 2 为 底 ,E 为 对 数 的 LOG2E。 主 要 方法 有 求 绝对 值 abs()、 

正弦 sin()、 余 弦 cos()\ 反 正弦 asin()\ 反 余弦 acos() ,正切 tan()、 反 正切 atan()、 四 舍 五 人 

round() .平方根 sqrt() 、. 乘 寡 值 pow(base,exponent) ,返回 0 一 1 之 间 的 随机 数 random() 等 。 
【 例 4.21】 Math 对 象 的 使 用 。 


< Script language = "javascript"> 


var radius = 5; // 声明 一 个 半径 变量 并 赋 数 值 
var circleArea = Math.PI * radius * radius; // 注意 Math 和 PI 需 大 写 
// 本 公式 计算 给 定 半 径 的 球体 的 体积 . 

volume = (4/3) * (Math. PI * Math. pow(radius, 3)); 

alert(volume); // 输 出 .5987 

// 也 可 用 With 保 留 字 来 简化 程序 的 写法 

with (Math) { 

var circleArea = PI * radius * radius; // 注意 Math 和 PI 需 大 写 
// 本 公式 计算 给 定 半 径 的 球体 的 体积 . 

volume = (4/3) * (PI* pow(radius,3)); 

} 

alert(volume); // 输 出 .5987 

</script> 


4) Date 对 象 

Date 对 象 可 以 用 来 表示 任意 的 日 期 和 时 间 ,获取 当前 系统 日 期 以 及 计算 两 个 日 期 的 间 
隔 等 。 常 用 的 方法 有 getFullYear getMonth .getDate 等 。 通 常 Date 对 象 给 出 星期 月份 、 
天 数 和 年 份 以 及 以 小 时 、 分 钟 和 秒表 示 的 时 间 。 该 信息 是 基于 1970 年 1 月 1 日 00:00:00. 
000 GMT 开始 的 毫秒 数 ,其 中 GMT 是 格林 威 治 标准 时 间 ( 首 选 术 语 是 UTC, Universal 
Coordinated Time, 或 者 “全 球 标 准时 间 ”, 它 引用 的 信号 是 由 “世界 时 间 标 准 ” 发 布 的 )。 
JavaScript 可 以 处 理 250000 B.C. 到 255000 A. D. 范围 内 的 日 期 。 同 样 可 使 用 new 运算 符 
来 创建 一 个 新 的 Date 对 象 。 

【 例 4.22】 Date 对 象 的 使 用 。 


< script language = "javascript"> 

/x 

本 示例 使 用 前 面 定义 的 月 份 名 称 数组 . 

第 一 条 语句 以 "Day Month Date 00:00:00 Year" 格 式 对 Today 变量 赋值 。* / 

var Today = new Date(); // 获 取 今 天 的 日 期 

// 提取 年 ,月 ,日 

thisYear = Today. getFullYear(); thisMonth = Today. getMonth(); thisDay = Today. getDate(); 
// 提取 时 ,分 , 秒 

thisHour = Today. getHours( ); thisMinutes = Tbday. getMinutes( ) ;thisSeconds = Today. getSeconds(); 


// 提 取 星 期 几 

thisWeek = Today. getDay( ); 

var x = new Array(" 日 ", "—", "二 "); x = x.concat(" 三 ", "四 ", "五 ", "入"); 
thisWeek = x[ thisWeek]; 


nowDateTime = "现在 是 " + thisYear + "年 " + thisMonth +" 月 "+thisDay+ "日 "; 


nowDateTime + = thisHour + "时 " + thisMinutes + "分 " + thisSeconds + " 秒 "; 
nowDateTime + = "星期 " + thisWeek; 


document. write(nowDateTime+ "< br >"); // 输 出 : 现在 是 年 月 日 时 分 秒 


// 计 算 两 个 日 期 相差 的 天 数 
Var datestringl = "November 1, 1997 10:15 AM"; 
Var datestring2 = "December 1, 2007 10:15 AM"; 
var DayMilliseconds = 24* 60*60*1000; //1 天 的 毫秒 数 
var tl = Date.parse(datestringl1); // 换 算 成 自 年 月 日 到 年 月 日 的 毫秒 数 
var t2 = Date.parse(datestring2); // 换 算 成 自 年 月 日 到 年 月 日 的 毫秒 数 
s = "There are" 
s + = Math.round(Math.abs((t2— t1)/DayMilliseconds)) + " days " 
s + = "between " + datestringl + " and " + datestring2 ; 


document. write(s); // 输 出 : There are 3682 days between November 1, 1997 10:15 
//AM and December 1, 2007 10:15 AM 
</script > 


5) Number 对 象 
除了 Math 对 象 中 可 用 的 几 个 特殊 数值 属性 (例如 PD 外 ,Number 对 象 还 有 几 个 其 他 
数值 属性 ,如 表 4-5 所 示 。 
表 4-5 Number 对 象 数 值 属 性 


属 性 描 述 属 性 描 述 
MAX_VALUE 数值 最 大 数 POSITIVE_INFINITY 代表 正 无 穷 大 
MIN_VALUE 数值 最 小 数 NEGATIVE_INFINITY 代表 负 无 穷 
NaN 特殊 非 数 量 值 


Number. NaN 是 一 个 特殊 的 属性 ,被 定义 为 “不 是 数值 ”。 例 如 被 0 除 返回 NaN。 试 图 
解析 一 个 无 法 被 解析 为 数字 的 字符 串 同样 将 返回 Number. NaN。 把 NaN 与 任何 数值 或 其 
本 身 作 比较 的 结果 都 是 不 相等 。 不 能 通过 与 Number. NaN 比较 来 测试 NaN 结果 ,而 应 该 
使 用 isNaN() 函数 。 

6) JavaScript 中 的 预定 义 函 数 

预定 义 函 数 提供 了 与 任何 对 象 无 关 的 系统 函数 ,使 用 这 些 函 数 无 须 创 建 任何 实例 ,可 直 
接 用 。 例 如 : 


返回 字符 串 表 达 式 中 的 值 。 eval( 字 符 串 表达 式 ), 例 : test = eval("8+9+5/2") 


返回 字符 的 编码 escape( string) // 用 名 xx 十 六 进 制 形式 编码 
返回 字符 串 ASCII 码 unescape( string) // 将 用 escape 编码 过 的 字 串 复原 
返回 实数 parseFloat(floatstring) // 字 符 数字 变 成 实数 

返回 不 同 进 制 的 数 parseInt(numbestring, radix) //radix 是 数 的 进 制 ， 


//numbestring 为 字符 串 数 .字符 数字 按 进 制 变 成 整数 


3. 用 户 自 定义 对 象 
使 用 JavaScript 也 可 以 创建 自己 的 对 象 。 虽 然 JavaScript 内 部 和 浏览 器 本 身 的 功能 已 
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十 分 强大 ,但 JavaScript 本 身 还 提供 了 创建 新 对 象 的 方法 ,可 以 完成 许多 复杂 的 工作 。 
要 创建 一 个 对 象 ,必须 首先 为 其 定义 一 个 构造 函数 ,赋予 对 象 属性 和 方法 。 其 基本 格式 如 下 : 


function ObjectName( 属 性 表 ){ 


this. propertyl = propertyl; // 属 性 的 定义 
this. property2 = property2; // 属 性 的 定义 
ed ; // 方 法 的 定义 
this. method2 = FunctionName2; // 方 法 的 定义 
} 


【 例 4.23】 创建 一 个 对 象 pasta。 


< script language = "javascript"> 
// 定 义 pasta 对 象 
function pasta(grain, width, shape, hasEgg) { 
this, grain = grain; 
this, width = width; 
this. shape = shape; 
this. hasEgg = hasEgg; 


// 使 用 对 象 的 时 候 , 用 new 进行 实例 化 ,下 面 建立 了 两 个 对 象 实例 . 
var spaghetti = new pasta("wheat", 0.2, "circle", true); 
var linguine = new pasta("wheat", 0.3, "oval", true); 


document. write( spaghetti. shape) // 输 出 circle 
document. write(linguine. shape) // 输 出 oval 
</script > 


【 例 4.24】 扩充 上 例 中 定义 的 pasta 构造 函数 使 其 包含 toString 方法 。 


< script language = "javascript"> 
// 定 义 pasta 对 象 
function pasta(grain, width, shape, hasEgg) { 
this. grain = grain; 
this.width = width; 
this. shape = shape; 
this. hasEgg = hasEgg; 
this. toString = pastaToString; 
| 
function pastaToString(){ 
return "Grain: " + this.grain + "\n" +"Width: " + this.width + "\n" + 
"Shape: " + this. shape + "\n" + "Egg?: " + Boolean(this. hasEgg); 
} 
// 用 new 建立 pasta 对 象 的 实例 spaghetti 
var spaghetti = new pasta("wheat", 0.2, "circle", true); 


// 可 以 给 对 象 实例 spaghetti 添加 属性 ,改变 该 实例 
spaghetti. color = "pale straw"; 
spaghetti. drycook = 7; 


Spaghetti. freshcook = 0.5; 


alert(spaghetti) // 输 出 : Grain: wheat Width: 0.2 Shape: circle Egg? : true 
alert( spaghetti. freshcook) // 输 出 : .5 


// 用 new 建立 pasta 对 象 的 实例 chowFun 
Var chowFun = new pasta("rice", 3, "flat", false); 


//chowFun 实例 中 并 不 包括 实例 spaghetti 添加 的 color 属性 .可 以 为 pasta 对 象 添加 一 个 
//color 属性 ,以 后 所 有 pasta 的 对 象 实例 均 可 使 用 此 属性 
pasta. prototype. color = "yellow"; 


alert( spaghetti. color); // 输 出 : pale straw 
alert(chowFun. color); // 输 出 : yellow (chowFun 已 经 具有 color 属性 了 ) 
</script > 


4.1.4 JavaScript ActiveX 编程 技术 


第 3 章 介 绍 了 在 HTML 页 面 中 可 使 用 ActiveX 控件 来 播放 声音 和 Flash 等 ,那么 如 何 
在 JavaScript 脚本 程序 中 进行 ActiveX 控件 的 编程 处 理 呢 ? 一 般 来 说 ,在 计算 机 上 安装 好 
系统 软件 和 应 用 软件 后 ,一 些 ActiveX 控件 就 会 安装 在 计算 机 上 ,就 可 以 直接 利用 这 些 
ActiveX 控件 来 实现 所 需要 的 功能 。 例 如 FileSystemObject 控件 对 象 提供 对 计算 机 文件 系 
统 的 访问 ; Excel. Application 和 Word. Application 分 别提 供 对 Excel 和 Word 的 控制 和 操 
作 。 而 JavaScript 还 提供 了 ActiveXObject 方法 来 实现 对 ActiveX 控件 的 访问 。 

FileSystemObject 控件 对 象 提 供 了 几乎 所 有 访问 磁盘 文件 系统 所 需要 的 功能 ,例如 文 
件 与 文件 夹 的 创建 和 删除 、 复 制 文件 .删除 文件 、 移 动 文件 ,驱动 器 操作 、 读 写 文件 操作 等 , 具 
体 的 属性 方法 和 事件 用 法 可 参阅 相关 资料 。 

下 面 主要 通过 例子 的 方式 说 明 JavaScript 的 ActiveX 编程 技术 。 

【 例 4.25】〗 利用 JavaScript ActiveX 实现 文件 系统 操作 。 


< script type = "text/javascript" > 
var fso = new RctiveXObject("Scripting.FileSystemObject") 


fso. CreateFolder ("C:\\Bonus"); // 在 C 盘 创建 一 个 文件 夹 
fso. DeleteFolder ("C:\\Bonus"); // 删除 创建 的 文件 夹 

fso. CopyFile("c:\\temp\\11. bmp", "c:\\Bonus\\22. bmp"); // 复 制 文件 

// 创建 新 文件 

var tf = fso.CreateTextFile("c:\\testfile. txt", true); 

tf. WriteLine("Testing 1, 2, 3.") ; // 填写 数据 ,并 增加 换行 符 
tf. WriteBlankLines(3); // 增加 3 个 空 行 

tf.Write ("This is a test.") 7 // 填写 一 行 ,不 带 换行 符 
tf.Close() // 关闭 文件 

/打开 文件 


Var ForReading= 1; 
var ts = fso.OpenTextFile("c:\\testfile. txt", ForReading); 


s = ts.ReadLine(); // 读 取 文件 一 行内 容 到 字符 串 
alert("File contents = " + s+ ""); // 显示 字符 串 信息 
ts. Close(); // 关闭 文件 


</script > 
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【 例 4.26】 调用 Excel 的 例子 1 。 


< script language = "javascript"> 

// 启 动 创建 对 象 的 应 用 程序 Excel 

Var ExcelApp = new ActiveXObject("Excel. Application"); 

Var ExcelSheet = new ActiveXObject("Excel.Sheet"); // 创 建 Excel 工作 表 
ExcelSheet. Application. Visible = true; // 使 Excel 窗口 可 见 
// 将 一 些 文本 放置 到 表格 的 第 一 格 中 

ExcelSheet. RctiveSheet.Cells(1,1).Value = "This is column A, row 1"; 

// 保存 Excel 文件 到 C:\TEST1. XLS 

ExcelSheet. Savehs("C:\NTEST1.XLS" ) 

// 用 Quit 方法 关闭 Excel 

ExcelApp. Quit(); 

// 可 以 找到 C:\TEST1. XLS 文件 ,检查 其 正确 性 

</script> 


【 例 4.27〗 调用 Excel 的 例子 2。 


< script language = "javascript"> 


// 启 动 Excel 
Var ExcelApp = new ActiveXObject("Excel. Application"); 
ExcelApp. Visible = true; // 使 Excel 窗口 可 见 


ExcelApp. WorkBooks. Open("c:\\TEST. xls"); 

Var objExcelBook = ExcelApp. ActiveWorkBook; 

Var objExcelSheets = objExcelBook. Worksheets; 

var objExcelSheet = objExcelBook. Sheets(1); // 指 定 当前 工作 区 为 Sheet2 

// 此 处 为 对 Excel 单元 格 进行 填写 数据 的 语句 

objExcelSheet. Range ( " B2: k2"). Value = Array ( " Weekl"," Week2"," Week3"," Week4"," Week5", 
"Week6", "Week7"); 

objExcelSheet. Range( "B3:k3"). Value = Array("67","87","5", "9","7", "45", "45", "54", "54", "10"); 
objExcelSheet. Range( "BA:k4"). Value = Array("10", "10", "8", "27", "33","37","50", "54","10","10"); 
objExcelSheet. Range("B5:k5"). Value = Array("23","3", "86", "64", "60", "18", "5", "1","36", "80"); 
objExcelSheet. Cells(3,1).Value = "InternetExplorer"; 

objExcelSheet. Cells(4,1).Value = "Netscape"; 

objExcelSheet. Cells(5,1).Value = "Other"; 


objExcelSheet. SaveAs("C:\\TEST2. XLS" ); // 保 存 到 C:\TEST2. XLS 
ExcelApp. Quit(); // 退 出 Excel 
</script > 


【 例 4.28】 调用 Word 的 例子 。 


< script language = "javascript"> 


WordApp = new ActiveXObject("Word. Application"); // 启 动 Word 

WordApp. Application. Visible = true; // 使 Word 窗口 可 见 

var mydoc = WordApp. Documents. Add("",0,1); // 新 建 一 个 文档 
WordApp. ActiveWindow. ActivePane. View. Type = 3; //Word 视图 模式 为 页 面 
WordApp. Selection. TypeText ("测试 案例 "); // 输 入 字符 串 

WordApp. Selection. HomeKey (5,1); // 光 标 移 到 行 首 
WordApp. Selection.Font.Bold = 9999998 ; //wdToggle 


WordApp. Selection. WholeStory( ); // 选 中 整个 文档 内 容 


mydoc. SaveAs("c:\\test. doc"); // 存 盘 到 c:\test. doc 
for(i= WordApp. Documents.Count;i>0;i--){  // 关 闭 所 有 打开 的 Word 文 档 
WordApp. Documents(i).Close(0); 
| 
WordApp. Application. quit(); // 退 出 Word 
</script> 


一 般 的 参考 书 很 少 涉 及 详细 讲解 如 何 使 用 Excel 和 Word 的 方法 和 属性 ,使 得 开发 者 
在 开发 Word 和 Excel 的 应 用 时 望而生畏 。 其 实 ,可 以 在 Word 或 Excel 中 通过 录制 宏 的 功 
能 先 将 你 准备 在 Word 或 Excel 中 操作 的 过 程 通过 录制 宏 的 方式 录制 下 来 ,然后 打开 录制 
的 宏 ,它们 是 使 用 Visual Basic Application 语言 编写 的 程序 ,将 这 些 程序 复制 到 JavaScript 
中 加 以 改造 , 即 可 完成 在 JavaScript 中 的 编程 。 对 于 其 中 的 参数 可 在 Word 或 Excel 中 , 通 
过 单 击 “工具 ”|* 宏 ”|*Visual Basic 编辑 器 ”菜单 打开 Visual Basic 编辑 器 , 按 下 F2 键 打开 
对 象 浏览 器 ,输入 参数 后 ,就 可 得 到 参数 对 应 的 值 。 例 如 字体 的 加 粗 与 否 通过 参数 
wdToggle 设 定 ,查询 出 来 的 参数 值 为 9999998。 


4.2 HTML DOM 程序 设计 初步 


4.2.1 HTML 文档 对 象 模型 


HTML 文档 对 象 模型 DOMCHTML Document Object Model) 是 一 个 能 够 让 程序 和 脚 
本 动态 访问 和 更 新 HTML 文档 内 容 、 结 构 及 样式 的 语言 平台 。HTML DOM 是 一 个 跨 平 
台 、 可 适应 不 同 程序 语言 的 文件 对 象 模型 , 它 采 用 直观 一 致 的 方式 ,将 HTML 或 XHTML 
文件 进行 模型 化 处 理 ,提供 存 取 和 更 新 文档 内 容 、 结 构 和 样式 的 编程 接口 。 使 用 DOM 技 
术 , 不 仅 能 够 访问 和 更 新 页 面 的 内 容 及 结构 ,而 且 还 能 操纵 文档 的 风格 样式 。 可 以 将 
HTML DOM 理解 为 网 页 的 API。 它 将 网 页 中 的 各 个 HTML 元 素 看 做 一 个 个 对 象 ,从 而 
使 网 页 中 的 元 素 可 以 被 JavaScript 等 语言 获取 或 者 编辑 。 

因为 DOM 规范 在 不 断 发 展 ,各 种 浏览 器 对 DOM 的 支持 情况 会 有 所 变化 ,在 使 用 时 应 
参照 最 新 的 DOM 文档 。 我 们 经 常 看 到 在 某 个 浏览 器 下 工作 正常 的 页 面 在 另外 一 种 浏览 器 
下 却 显示 不 正常 ,这 就 是 浏览 器 对 DOM 的 支持 不 尽 相同 。 对 于 某 些 专业 的 大 型 网 站 ,开发 
人 员 通 常会 识别 浏览 器 类 型 ,针对 浏览 器 的 不 同 而 进行 相应 代码 的 处 理 ,以 尽量 使 生成 的 网 
页 在 各 种 浏览 器 上 工作 正常 。 

微软 IE 浏览 器 的 文档 对 象 模型 如 图 4-2 所 示 。 


Windows 
浏览 器 窗口 | 
Document 文 档 | Frame/lframe 框 架 事件 属性 ‘ Navigator 
浏览 器 对 象 
Form 表 单 超 链 接 像 样式 表 All 


图 4-2 下 浏览 器 的 文档 对 象 模型 
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HTML DOM 定义 了 一 种 访问 并 操作 HTML 文档 的 标准 方法 。HTML DOM 将 
HTML 文档 视 为 嵌 套 其 他 元 素 的 树 型 结构 元 素 。 所 有 的 元 素 , 它 们 包含 的 文字 以 及 它们 的 
树 型 都 可 以 被 DOM 树 访问 到 。 它 们 的 内 容 可 以 被 修改 和 删除 ,并 且 可 以 通过 DOM 建立 
新 的 元 素 。 

HTML DOM 所 包含 的 内 容 实在 太 多 ,很 难 在 短 时 间 内 掌握 和 学 好 ,掌握 HTML DOM 
编程 最 简单 的 方法 就 是 多 读 别 人 的 程序 。 当 你 访问 某 个 网 站 的 时 候 , 如 果 你 觉得 网 页 上 的 
某 些 功 能 不 错 ,在 I 下 浏览 器 中 ,可 通过 快捷 菜单 中 的 “查看 源 文件 "或 通过 主 菜 单 “ 查 看 ”| 
“ 源 文件 ”在 文本 编辑 器 中 查看 HTML 页 面 文件 ,从 中 可 以 发 现 很 多 有 用 的 代码 。 但 很 多 
客户 端 脚本 程序 通过 一 script src 二 "myjsfile. js" 二 一 /script 过 这样 的 方式 引用 ,无 法 在 文本 
编辑 器 中 看 到 ,实际 上 这 些 文件 全 部 放 在 浏览 器 的 缓存 中 (Web 服务 器 传 回 的 各 类 文件 , 包 
括 图 片 、 页 面 文 档 等 都 放 在 缓存 中 )。 可 通过 以 下 方法 查看 脚本 程序 源 代码 : 

(1) 在 微软 I 下 浏览 器 主 菜单 中 , 单 击 “ 工 具 ”|“Internet 选项 ”, 打 开 “Internet 选项 
话 框 , 单 击 “ 删 除 文件 ”按钮 选择 “删除 所 有 脱 机 文件 ”, 然 后 单 击 * 确定" 按 包 退出 对 话 框 。 这 
样 做 的 目的 就 是 可 以 让 你 方便 地 找到 所 需要 的 js 文件。 

(2) 在 浏览 器 中 输入 网 址 ,通过 上 述 查 看 源 文件 方法 ,找到 引用 的 js 文件 ,不 妨 假设 为 
myjsfile. js。 

(3) 选择 菜单 “工具 ”|“Internet 选项 ”, 打 开 “Internet 选项 对话 框 , 单 击 “ 设 置 ? 按 钮 后 
出 现 “ 设 置 ” 对 话 框 , 单 击 “ 查 看 文件 ”按钮 ,就 会 显示 缓存 文件 夹 Temporary Internet Files， 
如 图 4-3 所 示 。 按 下 F3 功能 键 或 单 击 工 具 栏 的 “搜索 ”, 输 入 在 缓存 文件 夹 中 要 搜索 的 文件 
名 myjsfile * .js( 或 输入 x*.js, 注 意 文件 名 后 需 加 上 * ), 即 可 搜索 出 myjsfile[1]. js、 
myjsfile[2].js 等 文件 。 浏 览 器 缓存 中 存放 了 许多 被 访问 网 站 的 文件 ,很 可 能 文件 名 有 相同 
的 ,因此 缓存 采取 了 在 文件 名 后 加 上 数字 标识 方式 来 区 分 不 同 网 站 的 相同 文件 名 。 


a | g 下 Se :adminis,,, 


-ookKie:adminis. .. olorinitr el 
图 雪 索 文件 或 文件 夹 | 二 Intemet ose Cookie:administrak' 
Fi 


.Cooke:administrat 
要 搜索 的 文件 或 文件 夹 名 为 曙 ) servlet Cooke:administrat 
PisEilee 订 该 文件 辣 过 的 所 有 Cookie:adminis.., Cookie:administrat 
包含 文字 已) 六 这 人 这 全 加 Cookie:adminis,. Cookieiadministrak 
件 夹 中 《 也 称 作 绥 存 ) ， 以 便 加 块 四 Se dminis, ., Cookie:administrat, 
再 次 访问 这 些 站 点 时 的 速度 。 ookie: 
搜索 范围 L) 
ne venporey Internet riles 辐 
立即 搜索 人 FE 过 
EJ [a Ee ,请 单 击 ' 设 置物 ” 国 cooke 
记 日 期 @) 选 定 项 目 可 以 查看 其 说 明 。 
类 型 中 
六 太 小 (z) 时 


,896 个 对 象 


图 4-3 搜索 下 浏览 器 缓存 中 的 js 文件 


(4) 打开 搜索 的 js 文件 就 可 看 到 相应 的 源 代码 。 

利用 此 方法 可 以 找到 很 多 有 用 的 文件 ,例如 ,对 于 一 个 Flash 制作 的 swf 文件 ,采用 上 
述 方法 后 可 以 将 它 从 缓存 中 取出 存放 到 另外 一 个 文件 夹 作 长 期 保存 。 

下 面 主要 通过 实例 的 方式 让 读者 领悟 HTML DOM 编程 过 程 。 


4.2.2 通过 DOM 操纵 HTML 元 素 


可 以 这 样 来 理解 图 4-2 所 示 对 象 模型 : 在 HTML DOM 中 ,打开 的 浏览 器 窗口 可 看 成 
Window 对 象 ,浏览 器 显示 页 面 的 区 域 可 看 成 document 对 象 , 各 种 HTML 元 素 就 是 
document 的 子 对 象 。 

要 对 某 个 HTML 元 素 进行 操控 ,必须 为 它 设置 ID 属性 或 Name 属性 。 我 们 可 以 把 某 
HTML 元 素 的 ID 属性 看 成 是 该 控件 的 名 称 ,DOM 中 通过 ID 属性 或 Name 属性 来 操控 
HTML 元 素 。 建 议 全 部 用 ID 属性 ,而 不 用 Name 属性 ,Name 属性 只 是 为 了 兼容 低 版 本 浏 
览 器 。 例 如 : 

指定 ID 属性 : 二 input id 一 "myColor" type 王 "text" value 一 "red" 二 ; 

指定 Name 属性 : 一 input name 一 "myColor" type 一 "text" value 一 "red" 二 。 


【 例 4.29】 动态 改变 浏览 器 背景 颜色 和 浏览 器 窗口 标题 1 。 


< htm]l > 
<head><title> 无 标题 页 </title> 
</head> 
<body> 
< input id = "myColor" type = "text" value= "red" > 
< input id= "myTitle" type = "text" value= "新 的 窗口 标题 " > 
< input id = "mybut1l" type = "button"” value = "改变 页 面 背 景 颜色 "> 
< input id = "mybut2" type = "button" value = "改变 浏览 器 窗口 标题 "> 
< script language = "javascript"> 
window. mybut1. onmousedown = function ( ) {window. document. bgColor = window. myColor. 
value;} 
window. mybut2. onmousedown = function() {window. document.title = window. myTitle. value;} 
</script > 
</body></html > 


【 例 4.30】 动态 改变 浏览 器 背景 颜色 和 浏览 器 窗口 标题 2。 


< htm]l > 

<head>< title> 无 标题 页 </title> 

</head> 

<body> 

< form id= "myForm" action="" method = "post" > 

< input id = "myColor" type= "text" value= "red" > 

<input id= "myTitle" type = "text" value = "新 的 窗口 标题 " > 

< input id= "mybutl" type= "button" value = "改变 页 面 背景 颜色 "> 
< input id = "mybut2"” type = "button” value = "改变 浏览 器 窗口 标题 "> 
</form> 

< script language = "javascript"> 
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window. myForm. mybut1. onmousedown = function() { 
window. document. bgColor = window.myForm.myColor.value;} 
window. myForm. mybut2. onmousedown = function(){ 
window. document. title = window. myForm. myTitle. value;} 
</script > 
</body> 
</html > 


例 4.29 中 ,用 户 在 文本 框 myColor 和 myTitle 中 分 别 输入 颜色 和 新 的 窗口 标题 , 单 击 
各 自 按钮 就 会 看 到 浏览 器 中 背景 颜色 和 窗口 标题 发 生 的 变化 。 注 意 ,在 JavaScript 程序 中 ， 
用 window. myColor. value 取 id 为 myColor 文本 框 的 值 , 用 window. mybutl. 
onmousedown 表示 id 为 mybutl 按钮 的 单 击 事件 。 

在 例 4. 30 中 ,将 例 4. 29 中 的 HTML 控件 放 在 一 个 id 为 myForm 的 表单 标记 中 ,因此 
在 JavaScript 程序 中 ,用 window. MyForm. myColor. value 取 id 为 myColor 文本 框 的 值 ， 
用 window. MyForm. mybutl. onmousedown 表示 id 为 mybutl 按钮 的 单 击 事件 。 

这 样 就 产生 了 一 个 问题 , 即 在 有 表单 和 无 表单 标记 对 象 的 HTML 文档 中 ,对 某 个 
HTML 元 素 对 象 的 访问 方式 有 很 大 变化 ,这 对 程序 员 来 说 会 带 来 很 大 的 麻烦 。 因 此 
HTML DOM 中 提供 了 统一 访问 HTML 元 素 的 6 种 方法 ,它们 的 格式 是 : 

。 window. document. all. item("HTML 元 素 的 ID") 

例如 : window. document. all. item("myColor")。 

。 document. all. HTML 元 素 的 ID 

例如 : window. document. all. myColor。 

。 window. document. getElementByld("HTML 元 素 的 ID") 

例如 : window. document. getElementByld("myColor")。 

。 window. document. getElementsByName("HTML 元 素 的 Name 属性 值 ") 

例如 : window. document. getElementsByName("firstName")。 

。 window. document. all. namedItem("HTML 元 素 的 Id 或 Name 属性 值 ") 

例如 : window. document. all. namedItem ("myColor")。 

。 window. document. getElementsByTagName("HTML 标记 和 名称 ") 

例如 : window. document. getElementsByTagName(C"div") 。 

getElementsByTagName 方法 可 实现 当 标 记 在 没有 定义 ID 或 Name 属性 的 情况 下 仍 
然 可 以 被 访问 。 例 如 : 


< script language = 'javascript'> 
for(i= 0;i< document.getElementsBYTagName("div" ). length;i++) { 
Var pp = document. getElementsByTagName("div")[i]. innerText; 
alert(pp); } ”// 显 示 所 有 文本 块 中 的 内 容 

</script> 


注意 : 由 于 HTML DOM 中 默认 根 对 象 为 window, 因 此 在 window 子 对 象 和 它 的 方法 
引用 中 可 以 省 略 window。 例 如 window. document 可 缩写 成 document。 


将 例 4. 29 和 例 4. 30 中 的 脚本 程序 分 别 换 成 例 4. 31、 例 4. 32、 例 4. 33 中 的 脚本 程序 ， 
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可 以 看 出 ,访问 HTML 元 素 的 方法 不 同 , 而 得 到 的 结果 相同 。 其 中 getElementById 方法 是 


W3C 倡导 的 标准 方法 ,各 种 浏览 器 均 支 持 它 。 如 果 要 设计 兼容 各 种 浏览 器 的 网 页 ,对 
用 getElementById 方法 来 访问 HTML 元 素 对 象 。 
【 例 4.31】 脚本 程序 1 一 一 动态 改变 浏览 器 背景 颜色 和 浏览 器 窗口 标题 。 


< script language = "javascript"> 

Var bl = window. document.all. item("mybut1"); 

Var b2 = window. document.all. item("mybut2"); 

var tl = window. document.all. item( "myColor"); 

Var t2 = window. document.all. item( "myTitle"); 

bl.onmousedown = function() {window. document. bgColor = t1.value;} 

b2. onmousedown = function() {window. document. title = t2.value;} 
</script > 


【 例 4.32】 脚本 程序 2 一 一 动态 改变 浏览 器 背景 颜色 和 浏览 器 窗口 标题 。 
< script language = "javascript"> 

Var bl = window. document.all. mybut1; 

Var b2 = window. document. all. mybut2; 

Var tl = window. document. all. myColor; 

Var t2 = window. document.all. myTitle; 

bl.onmousedown = function() { window. document. bgColor = t1.value;} 

b2.onmousedown = function() { window. document. title = t2.value;} 
</script > 


【 例 4.33】 脚本 程序 3 一 一 动态 改变 浏览 器 背景 颜色 和 浏览 器 窗口 标题 。 
< script language = "javascript"> 

var bl = document. getElementById( "mybut1" ); 

Var b2 = document. getElementById( "mybut2" ); 

var tl = document. getElementById( "myColor" ); 

Var t2 = document. getElementById( "myTitle"); 

bl. onmousedown = function() {document. bgColor = t1.value;} 

b2. onmousedown = function() {document. title = t2.value;} 
</script > 


4.2.3 HTML DOM 主要 对 和 象 介 绍 及 编程 实例 
1. 窗口 对 象 (window) 


E 议 采 


window 对 象 处 于 对 象 层 次 的 最 项 端 ,每 个 对 象 代表 一 个 浏览 器 窗口 ,封装 了 窗口 的 方 


法 和 属性 。window 对 象 所 包含 的 属性 方法 .事件 .对象 如 图 4-4 所 示 。 
编程 人 员 可 以 利用 window 对 象 控制 浏览 器 窗口 显示 的 各 个 方面 ,如 对 话 框 、 框 
主要 内 容 包括 以 下 内 容 。 


(1) onload 和 onunload 都 是 窗口 对 象 事件 ,在 加 载 Web 页 面 到 内 存 和 从 内 存 印 载 


Web 页 面 时 发 生 。 


(2) close 方法 可 用 来 关闭 浏览 器 窗口 。open 方法 可 以 打开 一 个 新 的 浏览 器 窗口 并 加 
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载 指定 的 Web 页 ,例如 以 下 脚本 实现 了 这 样 的 功能 : 新 打开 一 个 浏览 器 窗口 ,窗口 左上 角 
相对 屏幕 左上 角 的 坐标 位 置 为 (75,20) 像 素 , 窗 口 宽 480、 高 420 个 像素 ,在 窗口 加 载 QQ 首 
页 。 其 中 sName 可 以 取 值 为 "replace" (用 QQ 首页 替换 当前 页 面 )、"_blank" (新 打开 一 个 
浏览 器 窗口 显示 QQ 首页 )、"_parent" (在 当前 页 的 父 窗 口中 打开 QQ 首页 )、"_search" (在 
搜索 窗口 中 打开 QQ 首页 )、"_self"( 也 是 用 QQ 首页 替换 当前 页 面 )、"_top"( 用 QQ 首页 替 
换 框架 页 面 ,无 框架 时 和 _self 相同 )。 
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4-4 window 对 象 


Var SName = ' blank' 
window. open( 'http://www. qq. com', sName, 'scrollbars = no, width = 480, 
height = 420, left = 75, top = 20, status = no, resizable = yes'); 


(3) setInterval、clearInterval 方法 以 及 setTimeout、clearTimeout 方法 均 可 实现 定时 器 
功能 。 前 者 可 实现 以 指定 的 间隔 时 间 ( 毫 秒 ) 重 复 执行 某 一 功能 操作 ; 后 者 只 能 在 指定 的 时 
间 执 行 一 次 。 例 如 var id= setInterval(*code”,1000) 表示 1000 毫秒 执行 一 次 code。code 
可 以 为 一 段 JavaScript 代码 或 一 个 JavaScript 函数 名 。 

(4) prompt、alert、confirm 方法 实现 对 话 框 功能 ,其 中 prompt 为 接受 用 户 输入 字符 串 
的 对 话 框 ; alert 为 输出 文本 对 话 框 ,confirm 实现 具有 确认 和 取消 按钮 的 对 话 框 。 具 体 用 法 
请 看 例 4. 34。 

(5) showModalDialog、showModelessDialog 方法 用 于 从 父 窗口 中 弹出 模 态 和 无 模 态 
对 话 框 。 模 态 对 话 框 是 指 只 能 用 鼠标 或 键盘 在 该 对 话 框 中 操作 ,而 不 能 在 弹出 对 话 框 的 父 
窗口 中 进行 任何 操作 。 它 们 的 用 法 和 open 方法 类 似 , 不 过 它们 可 以 接受 父 窗 口传 递 过 来 的 
参数 。 例 如 以 下 脚本 实现 了 这 样 的 功能 : 新 打开 一 个 居中 显示 的 模 态 对 话 框 ,对 话 框 左上 
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角 相 对 屏幕 左上 角 的 坐标 位 置 为 (75,20) 像 素 ,窗口 宽 480、 高 420 像素 ,在 对 话 框 加 载 
sample. htm 页 面 , 父 窗口 的 标题 作为 参数 传递 到 对 话 框 ,对 话 框 的 边框 呈 sunken 效果 。 在 
sample. htm 中 可 用 window 对 象 的 属性 window. dialogArguments 得 到 传递 的 参数 值 。 


showModalDialog( "sample. htm", document. title, "dialogWidth: 480px; 
dialogHeight :420px; 
dialogLeft:75px; dialogTop:20px;center:yes;edge: sunken;"); 


(6) navigate 方法 实现 了 类 似 超 链接 的 功能 ,但 只 能 在 本 窗口 中 打开 另外 一 个 Web 页 
例如 单 击 按钮 后 ,从 当前 页 面 跳 转 为 另外 一 个 页 面 sample2. htm: 


a 


< input type = "button" value = "Navigate" 
onclick = "javascript :window. navigate!( 'sample2. htm'); "> 


(7) status 属性 可 以 在 浏览 器 窗口 状态 栏 显 示 给 定 的 文本 ; screenLeft 和 screenTop 为 
浏览 器 窗口 页 面 显 示 区 域 左 上 角 相 对 屏幕 左上 角 的 横 坐 标 和 纵 坐 标 ; closed 属性 可 以 返回 
窗口 是 否 打开 或 者 关闭 的 布尔 值 。 

(8) window 对 象 的 frame 集合 对 象 实现 了 在 浏览 器 脚本 程序 中 对 框架 的 处 理 。 
frames( 帧 ,又 称 框架 ) 可 以 实现 窗口 的 分 隔 操 作 。 可 以 把 一 个 窗口 分 割 成 多 个 部 分 ,每 个 部 
分 称 为 一 个 帧 ,每 个 帧 本 身 已 是 一 类 窗口 ,继承 了 窗口 对 象 所 有 的 属性 和 方法 。frames 集 
合 对 象 是 通过 HTML 标记 一 frame 二 、 一 frameset 二 来 创建 的 , 它 包 含 了 一 个 窗口 中 的 全 部 
帧 数 。 用 parent 或 top 指定 当前 帧 的 父 窗 口 , 例 如 要 得 到 窗口 中 所 有 帧 对 象 集合 ， 
window. parent. frames 或 window. top. frames 即 可 。 用 self 指定 当前 帧 ,例如 指定 当前 帧 
跳 转 到 另 一 个 Web 页 ,用 window. self. navigate ("new. htm") 即 可 。 具 体 用 法 如 下 : 


< script language = "javascript"> 

var frm = window.parent. frames; 

for (i=0; i<frm.length; it+) alert(frm(i).name);  // 对 每 个 帧 进行 循环 
alert(window. parent. frames. length); // 显 示 一 个 窗口 被 分 成 了 几 个 帧 

Var frm = document. frames; 

// 显 示 每 个 帧 的 URL 地 址 

for (i=0; i< frm.length; i++) alert(frm(i). location); 

window. self. navigate( "new. htm" ) // 当 前 帧 跳 转 到 新 的 页 面 

</script > 


【 例 4.34】 window 对 象 对 话 框 演示 。 


< script language = "JavaScript"> 

var test = window. prompt( "请 输入 数据 :"); 

var YorN = confirm(" 你 输入 的 数据 是 " + test + "， 确 定 吗 ?"); 
证 (YorN) alert(" 输 入 正确 !"); 

else alert(" 输 入 不 正确 !"); 

</script> 
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【 例 4.35】 模 态 对 话 框 演示 。 演 示 效 果 如 图 4-5 所 示 。 


< html >< head >< title> 无 标题 页 </title></head> 
< SCRIPT language = "JavaScript" > 
function fnRandom( iModifier){ 
return parseInt(Math. random( ) * iModifier); // 形 成 随机 数 
} 
function fnSetValues(){ 
var iHeight = oForm. oHeight. options[ oForm. oHeight. selectedIndex]. text; 
if(iHeight. indexOf ("Random")>— 1){ 
iHeight = fnRandom( document. body. clientHeight); /x* 随机 数 小 于 浏览 器 页 面 显 示 区 域 的 
高 度 */ } 
var sFeatures = "dialogHeight: " + iHeight + "px;"; 
return sFeatures; 
!} 
function fnOpen(){ 
var sFeatures = "dialogWidth:200px;" + fnSetValues(); 
showModalDialog("showModalDialog target. htm", "", sFeatures) 
} 
</SCRIPT > 
< body onmouseover = "self. status = ' 我 是 浏览 器 窗口 状态 栏 ,欢迎 您 !"" 
onload = "alert( ' 开 始 加 载 页 面 !') "> 
< FORM NAME = oForm> 
对 话 框 高 度 < SELECT NAME = "oHeight"> 


<OPTION>-— Random -- </OPTION> 
<OPTION> 120 </OPTION> 
< OPTION > 200 </OPTION> 
< OPTION > 250 </OPTION> 
< OPTION > 300 </OPTION> 
</SELECT >< br > 建立 模 态 对 话 框 
< INPUT TYPE = "button" VALUE = "Push To Create" onclick = "fnOpen()"> 
</FORM> 
</body> </html > 


本 无 标题 页 -Microsoft IVREEE 人 全 SE 


文件 (E) ”编辑 (E) 查看 W) 收 戌 (A) 工具 (TD 帮助 (H) 


对 话 框 高 度 三 Ran 一 司 
建立 模 态 对 话 杠 EECEEE 


图 4-5 模 态 对 话 框 演示 


【 例 4.36】 该 例子 实现 了 动态 创建 按钮 和 超 链 接 HTML 元 素 标记 ,并 且 用 户 双 击 鼠 
标 后 ,浏览 器 页 面 开始 往 下 滚动 。 运 行 此 页 面 程序 后 注意 将 浏览 器 窗口 收缩 到 足够 小 ,以 便 
出 现 滚动 条 ,和 否则 看 不 到 效果 。Span 标记 是 容器 标记 ,用 来 放置 新 创建 的 HTML 元 素 ,也 
可 用 Div 标记 替代 Span 标记 。 本 例 中 创建 了 一 个 按钮 和 超 链接 标记 。window 对 象 有 两 个 
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很 重要 的 方法 window. setInterval ( ) 和 window. clearInterval () ,可 以 实现 定时 操作 。 
window. scroll(z,y) 方 法 可 实现 针对 浏览 器 窗口 页 面 显 示 区 域 左 上 角 位 置 的 屏幕 滚动 。 


类 型 


<html> 

<head>< title> 无 标题 页 </title> 

</head> 

<body> 

< input type = "button" value = "click me to add button" onclick = "AddElement();"> 

< SPAN ID = "mySpan"></SPRN > 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br> 


< script language = "javascript"> 
function AddElement() { 
mySpan. innerHTML = ""; 
// 添加 一 个 按钮 标记 


// 创 建 按钮 元 素 
Var aElement = document. createElement("< input type = 'button’>"); 
eval("aElement. value = ' 请 点 击 我 "); // 指 定 按钮 上 的 文字 
mySpan. appendChild(aElement) ; // 将 建立 的 按钮 放 到 Span 容器 标记 中 呈现 出 来 
aElement = document. createElement ("A"); // 添加 一 个 超 链接 标记 
aElement. innerText = ' 我 是 超 链接 '; // 指 定 超 链 接 中 的 文字 
aElement. href = "javascript:alert('R link. ')"; // 指 定 超 链接 的 链接 地 址 
mySpan. appendChild(aElement); // 将 建立 的 超 链 接 放 到 Span 容器 标记 中 呈现 出 来 
; 
// 双 击 鼠 标 滚动 屏幕 的 代码 


Var currentpos, timer; 


function initialize(){ 
// 每 隔 30 毫秒 执行 一 次 scrollwindow 函数 
timer = setInterval ("scrollwindow()",30); 
J’ 


function sc(){ 


clearInterval (timer); // 定 时 器 停止 工作 
} 
function scrollwindow(){ 
currentpos = document. body. scrollTop; // 获 取 顶 端的 Y 坐 标 值 (像素 ) 
window. scroll(0, ++currentpos); // 沿 Y 方 向 滚动 一 个 像素 单位 


if (currentpos ! = document. body. scrollTop) sc(); 
} 
document. onmousedown = sc; // 调 用 鼠标 单 击 事件 处 理 函数 ,实现 单 击 鼠 标 则 停止 屏幕 滚动 
document. ondblclick = initialize; // 调 用 鼠标 双击 事件 处 理 函数 , 实现 双击 鼠标 开始 屏幕 滚动 
</script > 
</body></html > 


2. 浏览 器 对 象 Cnavigator) 
navigator 对 象 是 window 的 子 对 象 。 它 提供 浏览 器 名 称 、 版本、 客户 端 支持 的 MIME 
属性 等 环境 信息 。navigator 对 象 常用 方法 和 属性 如 图 4-6 所 示 。 
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【 例 4.37】 使 用 navigator 对 象 获取 浏览 器 相关 信息 。 在 浏览 器 中 显示 结果 如 图 4-7 
所 示 。 


一 
弯 | 9 
javaEnabled 〇 ”六 | 定 浏览 器 是 否 可 用 Javs | 
| 属性 [ EE | Cc\Inetpub\ wwwroot\inden htm Mie ja [e] ES 
appCodeJane 返回 浏览 器 代码 名 称 文件 ”编辑 (E) ”查看 (WW 收藏) 工 
appWinaryersion 把 辐 浏 沉 器 的 简 生 说 明 
| 浏览 器 名 称 ,I crosoft Internet 
hrorserLaneuaes 双 国 当前 浏览 器 合用 的 语言 Explorer 
nn 是 天 支持 cooki es 浏览 器 版 本 ，4 ， 
er 十 辣 训 可 使 用 的 CPU 英 开 浏览 器 代码 名 称 ， Jozilla 
车 LE 系 纺 是 再 处 于 高 片 模式 浏览 器 系统 使 用 的 CPU 类 型 ，x86 国 
beviors 返回 肥 二 的 涂 作 系统 平台 
Lamene 基本 作 及 2t 认 训 [SE EE] 易 
图 4-6 ” navigator 对 象 常用 方法 和 属性 图 4-7 _ navigator 对 象 演 示 效 果 
< html><body> 


< script type = "text/javascript"> 

Var browser = navigator. appName 

var b_version = navigator. appVersion 

var version = parseFloat(b_version) 

var codeName = navigator. appCodeName 

Var cpu = navigator. cpuClass 

document. write(" 浏 览 器 名 称 : " + browser) 
document. write("< br />") 

document. write(" 浏 览 器 版 本 : "+ version) 
document. write("< br />") 

document. write(" 浏 览 器 代码 名 称 : " + codeName) 
document. write("< br />") 
document. write(" 浏 览 器 系统 使 用 的 CEU 类 型 : "+ cpu) 
</script> 

</body></html > 


3. 位 置 对 象 (location) 
location 对 象 是 window 的 子 对 象 。location 对 象 提 供 了 与 当前 打开 页 面 的 URL 一 起 
工作 的 方法 和 属性 。location 对 象 常用 的 方法 和 属性 如 
图 4-8 所 示 。 序 法 | 壤 玉 
location 对 象 中 href 属性 和 assign 与 replace 方法 0 i 
实现 的 功能 与 前 述 window 对 象 的 navigate 方法 相似 ， FemascsCaL ) 用 指定 的 新 web 页 莹 执 当前 页 面 | 
都 是 实现 在 当前 窗口 中 打开 一 个 新 的 页 面 的 功能 。 但 上 RE 人 


用 replace 方法 后 ,浏览 器 的 前 进 ,后 退 历史 记录 将 谱 be 


i e ef | 没 置 或 返回 完整 的 
失 。 请 比较 四 者 的 用 法 : 下 a 


pathnaneli 8 
window. location. href = "http://www. qq. com"; jport ”| 设置 或 返 与 RL 有 关 的 端口 寻 
window. location. assign("http://www. qq. com" ); lprotocol 册 置 或 返回 VEL 部 分 所 使 用 的 协议 


window. location. replace( "http://www. qq. com" ); Ts 


window. navigate("http://www. qq. com" ); 图 4-8 location 对 象 常用 方法 和 属性 
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当 用 户 在 程序 中 通过 href 或 url 传递 参数 的 时 候 , 例 如 window. navigate ("http:// 
sample. htm? x 一 5;y 一 6;z 一 7") 请 句 中 ,传递 了 参数 x、y、z 的 值 ,如 何 取 到 呢 ? 用 
location. search 就 可 以 取 到 问号 后 的 “x= 一 5;y 一 6;z 一 7” 字 符 串 ,然后 再 用 string 对 象 的 
split 方法 分 解 字 符 串 后 即 可 得 到 参数 x、y、z 的 值 。 

【 例 4.38】 显示 当前 页 面 的 URL .并 刷新 当前 页 面 。 


< htm]l >< head ></head> 

<body> 

< input type = "button” value = "重新 载 人 " onclick = "alert (location. href); location. reload 
(ys 

< SELECT onchange = "window. location. href = this. options[this. selectedIndex]. value"> 
< OPTION VALUE = "http://www.microsoft. com/ ie"> Internet Explorer </OPTION> 

< OPTION VALUE = "http://www. microsoft. com"> Microsoft Home </OPTION> 

< OPTION VALUE = "http://msdn. microsoft. com"> Developer Network </OPTION> 

</SELECT> 

</body> 

</html> 


4. 历史 对 象 (history) 

history 对 象 包含 浏览 器 的 浏览 历史 信息 。history 对 象 的 属性 和 方法 如 图 4-9 所 示 。 
用 户 在 浏览 器 中 通过 单 击 超 链 接 或 其 他 方式 不 断 跳 转 。 [zz Ces 
到 新 的 页 面 ,如 果 要 后 退 看 前 面 已 经 访问 过 的 网 页 历 证 一 1 四 
史 , 可 以 在 浏览 器 工具 条 单 击 “后 退 ”。 我 们 可 以 在 程序 sa | 历史 列表 中 装 入 前 一 个 UL 


te 二 总 病 [Ervera0 只 历史 列表 中 中 入 下 一 个 i 
控制 页 面 转向 某 一 个 网 页 历史 记录 。 例 如 history. Gnber RL 只 历 到 衣 中 装 入 RI 


go( 一 4) 用 来 显示 后 退 4 步 后 的 网 页 历史 ,history. BE EE 
go(4) 用 来 显示 前 进 4 个 页 面 后 的 网 页 历史 。 如 果 当 前 beee 本 


页 面 后 的 历史 记录 只 有 2 步 , 虽 然 设 定 了 前 进 4 步 , 没 4-9 _ history 对象 的 属性 和 方法 
有 那么 多 , 则 显示 最 后 一 个 网 页 历史 。back 和 forward 
方法 实现 后 退 和 前 进一步 的 功能 ,等 同 于 history. go( 一 1) 和 history. go(1)。 

【 例 4.39】 使 用 History 对 象 设置 页 面 链接 。 


< html > 

<head > 

<title> history 对 象 示例 </title> 

</head> 

<body> 

<ul> 

<1i onclick = "history.go( - 1)"> 后 退 一 页 </1i> 

< 1i onclick = "history. go(1)"> 前 进 一 页 </1i> 
</ul> 

<a onClick = "history. back()"><u> 上 一 页 </u></a> 
<a onClick = "history. forward()"><u> 下 一 页 </u></a> 
</body> 

</html> 
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5. 事件 对 象 (event) 
event 对 象 是 window 对 象 的 子 对 象 ,主要 作用 就 是 获取 或 者 设置 产生 事件 的 对 象 是 哪 
个 对 象 .键盘 按键 的 状态 .当前 鼠标 指针 的 位 置 . 鼠 标 按键 的 状态 ,等 等 。 其 常用 的 属性 见 


表 4-6 所 示 。 
表 4-6 event 事件 对 象 的 常用 属性 
属 性 描述 及 例子 
altKey 设置 或 获取 Alt 的 按键 状态 值 
altLeft 设置 或 获取 左 Alt 的 按键 状态 值 
button 设置 或 获取 用 户 按 下 鼠标 键 的 方式 。 没 按键 取 值 0; 按 左 键 取 值 1; 按 右键 取 值 2; 


clientX, clientY 
ctrlKey 

ctrlLeft 
keyCode 
offsetX, offsetY 
returnValue 
ScreenX ,screenY 
shiftKey 
shiftLeft 
srcElement 

type 

wheelDelta 

Xx,y 


【 例 4.40】 


同时 按 下 左右 键 取 值 3; 按 下 中 间 键 取 值 4 

设置 或 获取 相对 文档 显示 区 域 的 鼠标 指针 坐标 位 置 

设置 或 获取 Ctrl 的 按键 状态 值 

设置 或 获取 左 Ctrl 的 按键 状态 值 

设置 或 获取 产生 按键 事件 的 Unicode 键盘 代码 

设置 或 获取 相对 产生 事件 对 象 左 上 角 的 鼠标 指针 位 置 

设置 或 获取 事件 的 返回 值 

获取 相对 用 户 屏幕 左上 角 的 鼠标 指针 坐标 位 置 

设置 或 获取 Shift 的 按键 状态 值 

设置 或 获取 左 Shift 的 按键 状态 值 

设置 或 获取 产生 事件 的 对 象 

设置 或 获取 产生 事件 对 象 的 事件 名 称 

设置 或 获取 鼠标 滚轮 的 方向 和 距离 

设置 或 获取 相对 父 元 素 左 上 角 的 鼠标 指针 坐标 位 置 。 例 如 鼠标 在 文本 块 标志 Div 
中 移动 时 ,event. x 和 event. y 将 返回 相对 Div 左上 角 的 坐标 位 置 


使 用 srcElement 属性 ,判断 鼠标 单 击 了 哪个 元 素 。 


<html >< head ><title> srcElement 演示 </title></head> 
<body bgcolor = #FFFFCC > 
<UL ID = oUL onclick = "fnGetTags()" style= "cursor:hand"> 


<LI> Item 1 
<UL> 


<LI> Sub Item 1.1 


<OL> 


<LI> Super Sub Item 1.1 
<LI> Super Sub Item 1.2 


</OL> 


<LI> Sub Item 1.2 
<LI> Sub Item 1.3 


</UL> 
<LI> Item 2 
<UL> 


<LI> Sub Item 2.1 
<LI> Sub Item 2.3 


</UL> 
<LI> Item 3 
</UL> 
< SCRIPT LANGUAGE = "JavaScript"> 
function fnGetTags(){ 
var oWorkItem = event. srcElement; // 获 取 被 鼠标 单 击 了 的 对 象 
alert(oWorkItem. innerText); } // 显 示 该 对 象 所 包含 的 文本 
</SCRIPT> 
</body></html> 


6. 文档 对 象 (document) 

document 文档 对 象 是 浏览 器 对 象 的 核心 ,主要 作用 就 是 把 基本 的 HTML 元 素 作 为 对 
象 封装 起 来 ,提供 给 编程 人 员 使 用 。 编 程 人 员 利 用 这 些 对 象 ,可 以 对 WWW 浏览 器 环境 中 
的 事件 进行 控制 并 作出 处 理 。document 对 象 对 实现 Web 页 面 信息 交互 起 着 关键 作用 。 
document 对 象 所 包含 的 属性 方法 .事件 对象 如 图 4-10 所 示 。 


itle 
linplementation 


ldNodes 


(tyleSheets 


lonresizeend 
lonresizestart 
lbnselectionchanes 


图 4-10 document 对象 及 其 成 员 


对 document 对 象 的 详尽 介绍 可 参阅 其 他 资料 。 下 面 介 绍 其 常用 的 一 些 属性 \ 方 法 、. 事 
件 和 对 象 。 
(1) document 对 象 的 常用 属性 如 表 4-7 所 示 。 
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表 4-7 document 对象 的 常用 属性 
属 性 描 述 
alinkColor 设置 或 获取 文档 中 所 有 活动 超 链接 对 象 的 颜色 (将 鼠标 在 其 上 移动 时 ) 
vlinkColor 设置 或 获取 文档 中 所 有 被 访问 过 的 超 链接 标记 的 颜色 
linkColor 设置 或 获取 文档 中 所 有 超 链 接 标 记 的 颜色 
bgColor 设置 或 获取 页 面 的 背景 颜色 ,例如 将 背景 颜色 设 为 红色 : document. bgColor 一 "red" 
cookie 设置 或 获取 cookie 
documentElement ”获取 HTML 文档 的 根 结 点 ,例如 : 用 document. documentElement. innerHTML 可 
返回 页 面 的 源 代 码 
fgColor 设置 或 获取 页 面 的 前 景色 


fileCreatedDate 获取 HTML 文档 创建 的 日 期 
fileModifiedDate 获取 HTML 文档 最 后 修改 日 期 。 例 如 : alert(document. fileModifiedDate) 


fileSize 获取 HTML 文档 所 占 磁盘 空间 大 小 

lastModified 获取 HTML 文档 最 后 修改 日 期 和 时 间 

parentWindow 设置 该 文档 的 父 窗口 

protocol 设置 或 获取 URL 地 址 中 协议 部 分 内 容 

referrer 假定 当前 页 是 从 另外 一 个 页 面 的 超 链接 跳 转 的 ,该 属性 可 以 获取 上 一 个 页 面 的 URL 
地 址 

uniqueID 获取 为 对 象 自动 生成 的 一 个 唯一 标识 号 

URL 设置 或 获取 当前 文档 的 URL 地 址 。 例 如 document. URL="11. htm" 可 实现 页 面 
的 跳 转 


URLUnencoded ”将 URL 地 址 中 的 特殊 字符 代码 变 成 ASCI 码 。 例 如 alert(document. URL) 返 回 
"file://C:\Documents% 20and%20Settings\aa. htm" ,alert(document. URLUnencoded) 将 
返回 "file://C:\Documents and Settings\aa. htm" 


下 面 重点 介绍 document 对 象 的 cookie 属性 的 使 用 。 

cookie 是 放 在 浏览 器 缓存 中 的 一 个 文件 ,里 面 存放 着 各 个 参数 名 以 及 对 应 的 参数 值 。 
cookie 中 的 参数 是 以 分 号 相隔 的 ,例如 "name 一 20;sex 一 malei color 一 rediexpires 一 Sun 
May 27 22:04:25 UTC 十 0800 2008" 。 用 户 在 访问 同一 个 网 站 时 ,可 能 通过 链接 方式 打开 
了 多 个 浏览 器 窗口 ,这些 窗 口 间 需 要 共享 信息 时 ,cookie 就 可 以 完成 这 项 工作 。cookie 存放 
的 内 容 可 以 设置 失效 期 限 , 既 可 以 永久 保留 ,也 可 以 关闭 网 站 后 删除 ,还 可 以 在 指定 时 间 内 
失效 。 通 过 expires 指定 cookie 的 失效 日 期 , 当 没 有 失效 日 期 时 ,关闭 浏览 器 即 失 效 。 我 们 
可 以 保存 用 户 输入 的 参数 到 cookie 中 ,以 便 以 后 恢复 显示 。 例 如 在 登录 某 个 系统 时 ,需要 
用 户 从 学 生 、 科 任教 师 、 班 主任 、 辅 导 员 中 选择 一 种 用 户 类 型 登录 ,车 通过 cookie 保存 选 定 
的 用 户 类 型 后 ,以 后 再 次 登录 系统 ,就 无 须 再 让 用 户 选择 用 户 类 型 ,而 可 从 cookie 中 取出 上 
次 设 定 的 用 户 类 型 作为 默认 值 。 

【 例 4.41】 设置 cookie 和 获取 cookie 的 例子 。 该 例子 有 两 个 通用 的 函数 setCookie 
和 getCookie, 分 别 用 于 设置 和 获取 cookie。 用 户 在 文本 框 中 输入 姓名 , 单 击 按钮 “姓名 保存 
到 cookie” 后 ,再 单 击 “ 从 cookie 中 得 到 姓名 ”按钮 ,就 可 在 第 二 个 文本 框 中 显示 取 到 的 
姓名 。 


<HTML>< HEAD >< TITLE > First Document </TITLE > 
< script type = "text/javascript"> 


function getCookie(sName) 


// 从 cookie 中 获取 参数 name 的 值 


{ ”// cookie 中 的 参数 是 以 分 号 相隔 的 ,例如 "name = 20; sex= male;color = red;" 
Var aCookie = document. cookie. split("; "); 
for (var i=0; i<aCookie. length; i++) 
{// 对 存放 在 数组 aCookie 中 的 每 一 个 "参数 名 = 参数 值 " 进 行 循环 ,找到 要 获取 参数 值 的 参数 名 
var aCrumb = aCookie[i].split("="); 
if (sName == aCrumb[0]) 


return unescape(aCrumb[ 1]); 


} 
return null; 


)} 


// 如 果 找 到 则 返回 参数 值 
// cookie 中 请 求 的 参数 名 不 存在 时 返回 nul1 


// name: 参数 ,value: 参数 值 ，expires: 失效 日 期 ， 
// 功 能 : 将 参数 name 的 值 value 和 失效 日 期 expires 写 入 一 个 cookie 中 


function setCookie(name, value, expires) 


{ var expStr = ( (expires == null) ? "" : ("; expires=" 


+ expires) ); 


window. document. cookie = name + "=" + escape(value) + expStr; 


} 
</script > 
</HEAD> 


<BODY bgcolor = #FFFFCC> 


< Input id = "yourName" type = "text" value = 
< Input type = "button" value = 


"Tim"> 
"姓名 保存 到 cookie" onclick = "setCookie( 'name '，yYourName. 


value, 'Sun May 27 22:04:25 UTC + 0800 2008');"> 


< Input id = "GetName" type = "text" value = 
< Input type = "button" value = 


('name');"> 
</BODY ></html > 


n> 
"从 cookie 中 得 到 姓名 " onclick = "GetName. value = getCookie 


(2) document 对 象 的 常用 方法 如 表 4-8 所 示 。 


表 4-8 document 对 象 的 常用 方法 


方 法 描 述 
attachEvent 可 以 为 某 个 对 象 动态 绑 定 一 个 事件 处 理 程序 
write 在 当前 页 面 中 输出 HTML 形式 的 文本 串 
writeln 在 当前 页 面 中 输出 HTML 形式 的 文本 串 ,文本 串 末尾 追加 一 个 换行 键 
close 和 write 或 writeln 配对 使 用 ,关闭 输出 HTML 文本 流 , 立 即 在 浏览 器 中 显示 


createAttribute 
createElement 
createStyleSheet 
detachEvent 
elementFromPoint 
execCommand 

focus 
getElementById 
getElementsByName 
getElementsByTagName 
hasFocus 


open 


动态 创建 一 个 指定 属性 名 的 属性 

创建 一 个 指定 标签 的 元 素 实例 

为 文档 创建 样式 单 

将 事件 与 对 象 分 离 ,对 象 的 事件 不 再 起 作用 

获取 放 在 (x,y) 坐 标 处 的 HTML 元 素 对 象 

在 当前 文档 中 执行 命令 

使 元 素 对 象 得 到 焦点 ,执行 onfocus 事件 

通过 Id 属性 返回 第 一 个 元 素 对 象 

通过 Name 属性 返回 元 素 对 象 集合 

通过 标记 元 素 名 称 返 回 元 素 对 象 集合 

判断 当前 对 象 是 否 得 到 焦点 

当 只 指定 url 和 name 参数 时 ,在 当前 文档 中 输出 HTML 文本 流 , 用 close 关 
闭 ; 当 指定 其 他 附加 参数 时 ,其 作用 与 window. open 相同 
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方法 write 和 writeln 主要 用 来 实现 在 Web 页 面 上 显示 输出 信息 。 在 实际 使 用 中 ， 
writeln() 与 write() 唯 一 不 同 之 处 在 于 在 尾部 加 了 一 个 换行 符 。open 方法 有 两 种 用 法 : 
@ 与 window. open() 用 法 完全 一 致 ,用 来 创建 一 个 新 的 窗口 或 在 指定 的 命令 窗口 内 打 


开 文 档 。 First Document - Microsoft Internet eI[=T Ed 
@ 在 一 个 已 存在 文件 中 写 和 人 内容 或 创建 一 个 新 文 。[ 区 于 SE 三 #0 | 


件 来 写 入 内 容 。 在 完成 对 Web 文档 的 写 操作 后 ,要 使 用 | just want to cov 
close() 方 法 来 实现 对 输出 流 的 关闭 。 在 使 用 open() 来 打 
开 一 个 新 流 时 ,可 为 文档 指定 一 个 有 效 的 文档 类 型 ,有 效 Finish Sentence | 
文档 类 型 包括 text/ html、text/gif、text/ xim、text/ plugin 等 。 
【 例 4.42】 文档 对 象 write、open、close 方法 使 用 ® _cancel | 打开 新 窑 口 | 
演示 示例 。 示 例 将 实现 : 单 击 Finish Sentence 按钮 原 [SE 
地 输出 另外 一 个 页 面 , 单 击 “打开 新 窗口 ?按钮 打开 QQ 着 二 志 贡 册 遇 加 半 允 是 
首页 。 初 始 效 果 如 图 4-11 所 示 。 


<HTML>< HEAD ><TITLE> First Document </TITLE > 
< script type = "text/javascript"> 
function replace(){ 
var oNewDoc = document. open("text/html", "replace"); 
var sMarkup = "<HTML>< HEAD>< TITLE > New Document </TITLE >< BODY> Hello, world </BODY> 
</HTML >"; 
oNewDoc. write( sMarkup); 
oNewDoc. close( ); 
J 
function openwin() { 
document. open( 'http://www. qq. com', '_blank', 'scrollbars = no, width = 480, height = 420, left =75, 
top = 20, status = no, resizable = yes'); // 新 打开 一 个 窗口 } 
</script> 
</HEAD> 
< BODY bgcolor = #FFFFCC> 
<h4>I just want to say </h4><br> 
<! -- Button will call the replace function and replace the current page with a new one -一 > 
< Input type = "button” value = "Finish Sentence" onclick = "replace();"> 


< script type = "text/javascript"> 

// 在 当前 页 面 显 示 一 个 图 片 和 一 个 cancel 按钮 

document. writeln("<p></p>< hr >< img src = 'web. gif >"); 

document. writeln("< Input type = 'button' value = 'cancel >"); 
</script > 

< Input type = "button" value = "打开 新 窗口 "onclick = "openwin();"> 
</BODY > 

</html> 


(3) document 对 象 的 事件 。 

文档 对 象 的 事件 中 除了 响应 键盘 、 鼠 标 常 规 操 作 事件 外 ,还 增加 了 其 他 大 量 事件 ,例如 
鼠标 的 拖拉 操作 事件 (ondrag、ondragend、ondragenter、ondragleave、ondragover、 
ondragstart、ondrop) ,快捷 菜单 事件 oncontextmenu 等 。 例 如 以 下 代码 实现 了 在 浏览 器 窗 
口 文本 块 span 区 域 . 按 下 鼠标 右键 时 将 不 出 现 快捷 菜单 。 
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< SPAN STYLE = "width: 300; background - color: blue; color: white;" oncontextmenu = "return 
false"> 

< 了 > The context menu never displays when You right - click in this box.</P> 

</SPRN> 


(4) document 的 对 象 。 

document 所 包含 的 对 象 主要 是 集合 对 象 , 包 括 all anchors、 applets、 childNodes、 
embeds ,forms frames images links ,namespaces \scripts styleSheets 等 。 例 如 以 下 代码 演 
示 了 all 对 象 的 用 法 : 


var oItem = document.all;  // 得 到 页 面 中 的 所 有 对 象 ,并 显示 每 个 对 象 对 应 的 标记 名 称 
证 (oItem! = nul1) for (i=0; i<oItem. length; i++) alert(oItem. item(i). tagName); 

// 得 到 id 为 sample 的 所 有 元 素 并 显示 出 标记 名 称 

var oItem = document.all. item("Sample"); 

If (oItem ! = null) for (i=0; i<olItem.length; i++) alert(oItem. item(i). tagName); 


详细 介绍 各 个 对 象 的 使 用 超出 了 本 书 范围 。 为 方便 读者 查阅 , 表 4-9 列 出 了 DHTML 
的 一 些 常用 对 象 名 称 。 
表 4-9 DHTML 常用 对 象 名 称 
对 象 描 述 


window 当 出 现 二 body 二 或 是 二 frameset 二 标签 ,这 个 对 象 就 会 自动 建立 起 来 
location 含有 当前 URL 的 信息 


screen 由 脚本 工作 环境 引擎 自动 建立 , 它 包 含 了 有 关 客 户 显示 屏幕 的 信息 
event 代表 事件 的 状态 ,比如 哪个 元 素 的 事件 发 生 了 ; 键盘 按键 的 状态 ; 鼠标 的 位 置 ; 鼠标 按钮 
的 状态 等 


navigator 获取 客户 端 信息 ,包括 浏览 器 类 型 .操作 系统 类 型 .CPU 类 型 等 

通过 window 对 象 的 history 属性 所 访问 的 预先 确定 对 象 。 这 个 对 象 由 一 组 URLs 所 构 
成 。 这 些 URLs 即 用户 曾 经 在 浏览 器 中 访问 过 的 所 有 URLs 

document 可 用 来 访问 所 有 在 页 面 中 的 元 素 

anchor 代表 了 HTML 的 a 元 素 ( 超 链接 ) 


history 


applet 代表 了 HTML 的 applet 元 素 ,applet 元 素 可 用 来 放置 页 面 内 可 执行 的 内 容 

area 代表 了 图 像 映射 区 域 

base 代表 了 HTML 的 base 元素 

basefont HTML 的 basefont 元 素 

body 文档 的 主体 (body) 

button HTML 表单 上 的 按钮 。 只 要 HTML 表单 中 出 现 了 二 input type 二 "button" 标 签 ,一 个 
button 对 象 就 建立 了 


checkbox HTML 表单 中 的 复 选 框 只 要 HTML 表单 中 出 现 了 二 input type 二 "checkbox" 二 标签 ,就 
会 建立 起 checkbox 对 象 
fileupload 当 HTML 表单 中 有 一 input type= 二 "file" 祖 ,fileupload 对 象 就 建立 起 来 


form 表单 可 用 于 用 户 信息 的 输入 递交 。 代 表 HTML 中 的 form 元 素 

frame 代表 了 HTML 中 的 框架 

frameset HTML 的 框架 集 

hidden 在 HTML 中 的 隐藏 区 域 。 每 当 HTML 表单 中 出 现 过 input type 一 "hidden" 之 标签 ,hidden 对 


象 就 建立 起 来 了 
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续 表 
对 象 描 述 

iframe HTML 中 的 内 联 框架 

image HTML 的 img 元 素 

link HTML 的 link 元 素 。 只 能 在 <<head> 标 签 里 使 用 link 元 素 

meta HTML 的 meta 元 素 

option 在 HTML 表单 中 的 选择 项 。 每 当 HTML 表单 中 出 现 二 option 过 标签， 
option 对 象 就 建立 了 

password 代表 了 HTML 表单 中 的 password 区 域 。 每 当 HTML 表单 中 出 现 二 input 
type 二 "password"> 标 签 ,就 会 建立 该 对 象 

radio 代表 了 HTML 表单 中 的 单 选 按钮 。 每 当 表 单 中 出 现 了 一 input type 二 "radio" 二 标 
签 ,就 会 建立 该 对 象 

Teset 代表 了 HTML 表单 中 的 reset 按钮 。 每 当 表 单 出 现 了 一 input type 一 "reset" 之 
标签 就 会 建立 该 对 象 

select 代表 了 HTML 表单 中 的 选择 列表 。 每 当 表 单 中 出 现 二 select 之 标签 就 会 建 
立 该 对 象 

style 代表 了 独立 的 样式 声明 。 可 以 从 文档 或 使 用 样式 的 元 素 中 访问 这 个 对 象 

submit 代表 了 HTML 表单 中 的 提交 按钮 。 每 当 表单 中 出 现 二 input type 一 "submit" 二 
标签 该 对 象 就 建立 起 来 了 

table 代表 了 HTML 的 表格 元 素 

tabledata 代表 了 HTML 里 的 td 元 素 

tableheader 代表 了 HTML 里 的 th 元 素 

tablerow 代表 了 HTML 里 的 tr 元 素 

text 代表 了 表单 中 的 文字 输入 区 域 。 每 当 表单 中 出 现 二 input type 二 "text" 二 标 
签 该 对 象 就 建立 起 来 了 

textarea 代表 了 HTML 的 textarea 元 素 

下 面 通过 大 量 典型 的 实例 来 帮助 读者 掌握 编程 方法 。 
【 例 4.43】 使 用 documentElement 将 页 面 源 代码 调和 人 编辑 框 ; 用 滚动 鼠标 滚轮 的 方 
法 放大 或 缩小 图 片 。 


< htm]l >< head >< title> 将 页 面 源 代码 调 人 编辑 框 </title></head> 
<body> 
< SCRIPT type = "text/javascript"> 
function fnGetHTML( ){ 
var sData = document. documentElement. innerHTML; 
oResults. value = sData; 
} 


function zoomimg(o){ // 用 滚动 鼠标 滚轮 的 方法 放大 或 缩小 图 片 
var zoom = parseInt(o. style. zoom, 10)||100; 

zoom+ = event. wheelDelta/12; // 滚 轮 滚 过 的 距离 
if (zoom> 0) o. style. zoom= zoom+ '%S '; // 设 置 缩放 比例 


return false; 
} 
</SCRIPT > 


<A href = "javascript:fnGetHTML( )"> 将 页 面 源 代码 调和 编辑 框 </A> 
< TEXTAREA ID = oResults COLS = 50 ROWS = 10></TEXTAREA> 


<a href = "web. gif" onmousewheel = "return zoomimg(this)" target =" blank"> 
< img src = "web. gif"” border = 1 title = " 单 击 可 看 原 图 " 
onload = "javascript:if(this.width> 740)this.width= 740;" 

onmouseover = "javascript:if(this.width> 740)this.width= 740;"></a> 
</body> 
</htm]l > 


【 例 4.44】 使 用 document 对 象 查 看 元 素 名 称 。 


< html >< head > 

< script type = "text/javascript"> 

function getElement(){ 

var x= document. getElementBYyId("myHeader" ) 
alert(" 这 是 一 个 ”+ x. tagName + " 元 素 ") 

} 

</script > 

</head>< body> 

<h3 id = "myHeader" onclick = "getElement()"> 单 击 查看 此 元 素 名 称 </h3 > 
</body> 

</htm]l > 


【 例 4.45】 建立 两 个 Form 对 象 ,分 别 使 用 数组 和 名 称 试 调用 ,使 得 两 个 Form 中 的 文 
本 输入 内 容 保持 一 致 


< html >< head >< title> form 对 象 </title></head> 

<body> 

< form> 

< input type = "text" onChange = "document. my. elements[0].value = this.value;" > 
</form> 

< form name = "my"> 

< input type = "text" onChange = "document. forms[0].elements[0].value = this.valuei "> 
</form> 

</body></html > 


在 浏览 器 中 显示 结果 如 图 4-12 所 示 。 


池 form 对 象 Hicrosoft Internet Explorer 
编辑 四) 查看 GD) 收 亭 ) 工具 C) 帮助 00 


| On- ©- 国 国 的 | Pr wn 


地址 @) | 个:\htal\jevescriptl. hte 司 贺 关 到 


» 


窗 体 输入 保持 一 到 


窑 体 输入 保持 一 至 


ED 


图 4-12 Form 对 象 示例 


162 
开发 技术 (第 2 版 ) 


【 例 4. 46】 文档 对 象 应 用 举例 。 


< htm]l >< head ></head> 

<body> 

< form Name = "mytable"> 请 输入 数据 : 

< Input TYpe = "text"”Name = "text1" value = ""> 

</form> 

<Rname = "Linkl" href = "3 一 1. html"> 链 接 到 第 一 个 文本 </a><br> 

<A name = "Link2" href = "3 - 2. html"> 链 接 到 第 二 个 文本 </a><br> 

<R name = "Link2" href = "3 - 3. html"> 链 接 到 第 三 个 文本 </a><br> 

<R href ="#Linkl"> 第 一 锚 点 </a> 

<A href ="##Link2"> 第 二 锚 点 </a> 

<A Href ="#Link3"> 第 三 锚 点 </a><br> 

< Script Language = "javascript"> 

document. write(" 文 档 有 " + document. links. length+ "个 链接 " + "< br >"); 
document. write(" 文 档 有 " + document. anchors. length+ "个 锚 点 " + "< br >"); 
document. write(" 文 档 有 " + document. forms. length+ "个 窗 体 "); 
</script > 

</body></html > 


在 浏览 器 中 显示 结果 如 图 4-13 所 示 。 


DE:\htal\3-14.hta - Wicrosoft Internet Explorer 
文件 @) 编辑) 查看 WW) 收 若 由) 工具 CD) 帮助 0D 


四 银 - 加- 国 国 折 甩 时 交 tx 加 加 - 


地 址 四) | 慢 ] file: /177E: Ahtnl73-14. htngLinl3 
请 输 和 数据，[ | 
链接 到 第 一 个 文本 

文 


链接 到 第 文本 
第 一 镇 点 第 二 锁 点 辽 三 镍 六 
文本 有 6 个 斋 革 一 


文档 有 3 个 锚 点 
文档 有 1 个 窗 体 


图 4-13 document 对 象 应 用 示例 


【 例 4.47】 设计 一 个 输入 个 人 信息 的 页 面 示例 。 源 代码 如 下 : 


<html > 
< head>< script language = "JavaScript"> 
sex = new Array(); 
sex[0] = "Male"; 
sex[1] = "Female"; 
sele=0; 
sex_sele=0; 
function VertifyAndChgText(){ 
var Length = document. forms[0]. length; 
var Type, Empty = false; 
for(var i=0;i<Length;i++){ 


Type = document. forms[0]. elements[i].type; 
if (Type == "text") 
if (document. forms[0].elements[i].value == "") 
empty= true; 
b 
证 (!Empty){ 
name = "您 的 名 字 是 " + document. forms[0]. NameText.value + "\n"; 
alias = "您 的 别名 是 " + document. forms[0].AliasText. value + "\n"; 
sex_1 = "您 的 性 别 是 " + sex[ sex_sele] + "\n"; 
area = "您 所 在 的 地 区 是 " + document. forms[ 0]. area. options[ sele].text+ "\n"; 
exp = "备注 信息 是 " + document. forms[0].exp.value+ "\n"; 
document. forms[0]. info. value = name + alias + sex_1 +area+ exp; 
} 
else alert(" 您 的 信息 尚未 完全 输入 !"); 
return Empty; 


</script > 

</head> 

<body> 

<h3 align = center > 请 输入 您 的 个 人 信息 </h3 > 

<form> 

您 的 姓名 : < input type = text name = "NameText" size=15><br> 

您 的 别名 : < input type = text name = "AliasText" size=15><br> 

您 的 性 别 : < input type = "radio" name = "sex" onClick = "sex_sele= 0"> Male 
< input type = "radio" name = "sex" onClick = "sex_sele=1"> Female<br> 
你 所 在 地 区 : < select name = "area" onChange = "sele = this. selectedIndex"> 
< option value = "1"” selected > 云南 </option> 


< option value = "2"> 贵 州 </option> 
<option value = "3"> 四 川 </option> 
< option value = "4"> 西 藏 </option> 


< option value = "5"> 重 庆 </option ></select><br> 

备注 : < textarea name = "exp" rows = 4 cols = 25 ></textarea ><br><br><br> 
< input type = button value = "提交 信息 " onClick = "VertifyAndChgText()"> 
<br> 


您 已 输入 的 信息 是 : < textarea name = "info" rows = 6 cols=30></textarea><r><br> 


</form></body ></html > 


在 浏览 器 中 显示 结果 如 图 4-14 所 示 。 
【 例 4.48】 逐条 显示 信息 的 跑马 灯 。 源 代码 如 下 : 


< htm]l > 
< head></head> 
< script language = "javascript"> 
Rt 
function makearray(size){ 
this. length = size; 
for(i=1;i<= size;it+){this[i] =0} 
return this; 
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msg = new makearray(2); 
msg[1] = " 咕 ! 您 好 。"; 
msg[2] = "可 根据 需要 显示 不 同 内 容 !"; 
interval = 100; 
seq = 0; 
和 
function Scroll(){ 
document. myForm. myText. value = msg[i]. substring(0, seq+1); 
seqt+; 
if ( seq>= msg[i].length ) { seq = 0 ;it+;interval = 900}; 
if(i>2){i=1}; 
window. setTimeout("Scroll();", interval ); 
interval = 100; 
上 
二 各 
</script > 
<body OnLoad = "Scroll()"> 
< form name = "myForm"> 
< input type = "text" name = "myText" size= "50"> 
</form></body ></html > 


到 E:\htal\3-17.hta - Microsoft Internet Explorer 帮 | 右 | 区 | 
文件 外” 编辑 如 ”查看 WW) 收藏 和 ) 工具 CI) 天助 他 [3 


@e- 日 : 国 国 的 | 暴光 mx 加 全“ 


地 址 ) | 哥 E: htmlv3-17 htm [SE 


请 输入 您 的 个 人 信息 


: [Tordan 

别名 : [Eyer | 

您 的 性 别 ， @Jlale OFemale 
你 所 在 地 区 ，|[ 重 天 国 


A basketball starl 
备注 ， 


您 的 名 宇 是 Jordan 

您 的 别名 是 Flyer 

您 的 性 别 是 Male 

您 所 在 的 地 区 是 重庆 

备注 信息 是 A basketball star! 总 
您 已 输入 的 信息 是 , | 1 


是 我 的 电 议 


图 4-14 Form 对 象 综合 应 用 示例 


【 例 4.49】 设计 一 个 文件 上 载 控 件 , 先 期 没有 “提交 ”按钮 ,在 检查 上 传 图 片 的 大 小 后 ， 
若 图 片 符合 要 求 , 则 动态 创建 一 个 “提交 ?按钮 。 源 代码 如 下 : 


<html> 
<head> 
<title> 图 片上 传 </title> 
< script type = "text/javascript"> 
function WH _ Show(f){ 
obj = document. createElement("IMG"); 
obj. src = f. value; 
if(obj. width> 640 | | obj. height > 480){ 
alert(" 图 片 太 大 ,请 上 传 小 于 x480 的 图 片 . ") 
Bb 
elsef 
document. getElementById( 'sub') . innerHTML = < INPUT TYPE = "submit" NAME = "Submit” VALUE = "提交 ">' 
} 
! 
</script > 
</head> 
<body> 
< FORM NAME = "form1" METHOD = "post" ACTION = "upfile.aspx" ENCTYPE = "multipart/ form— data" > 
< INPUT TYPE = "hidden" size= "40" NAME = "act" VALUE = "upload"> 
< input type = "file" onchange = "WH_Show(this)"> 
<div ID= "sub"></div> 
</FORM></body></html > 


【 例 4.50】 实现 鼠标 悬 停 时 显示 放大 的 图 片 。 


< htm]l > 
<head> 
<title> 用 HTML DOM 放大 图 片 </title> 
</head> 
<body> 


<BR> 原 图 : <BR>< img src = imgl1. JPG onmousemove = "zoom()" id = srcImg> 
<BR> 局 部 放大 图 : <BR>< div style = "overflow:hidden">< img id = zoomImg></div> 
< script language = "JavaScript"> 

== 

zoomImg. SrC = srcImg.src; 

srcImg. height = srcImg. height/4; 

var zoomRate = 5; 

ZoomImg. height = srcImg. height * zoomRate; 

ZoomImg. parentNode. style.width = srcImg.width; 

ZoomImg. parentNode. style. height = srcImg. height; 
function zoom( ){ 

Var elm = event. srcElement; 

h = elm. offsetHeight/zoomRate/2; 

Ww = elm.offsetWidth/zoomRate/2; 

Var x = event.x— elm.offsetLeft; 

X=x<(elm. offsetWidth— w)?x<w?w:x:elm. offsetWidth— w; 
ZoomImg. style. marginLeft = (w— x) * zoomRate; 

vary = event.y— elm.offsetTop; 

y=y<(elm. offsetHeight ~ h)?y< h?h:y:elm. offsetHeight ~ h; 
zoomImg. style. marginTop = (h— y) * zoomRate; 

op 

</script > 

</body> 

</html> 
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在 浏览 器 中 显示 结果 如 图 4-15 所 示 。 


起 用 HTHL DOH 放 大 图 片 - Hicrosoft Internet Expl.-- 此 | 器 | 区 | 


; 文件 FE) 编辑 EE) 查看 WD 收 阅 多 ”工具 四。 帮助 中 [7 


Oa- 日 : 国 国 入 户 屿 责 tex 加 


地 址 0 | 机 EE: \html\htnldom htn 


局 部 放大 图 


图 4-15 用 HTML DOM 放大 图 片 
【 例 4.51】 动态 生成 表格 。 源 程序 如 下 : 


< html >< head >< title> 使 用 DOM 生成 一 张 表格 </title> 
< script language = "JavaScript"> 
function genTable(PNode){ 
var i,j; 
var contents = new Array(3); 
for (i=0;i<3;i+t+) contents[i] = new Array(3); 
contents[0][0] = " 书 名 "; 
contents[0][1] = "出 版 社 "; 
contents[1][0] = "C++ 程 序 设计 教程 "; 
contents[1][1] = "清华 大 学 出 版 社 "; 
contents[2][0] = "Web 程序 设计 "; 
contents[2][1] = "电子 工业 出 版 社 "; 
var tableNode = document. createElement ("TABLE"); 
var tBodyNode = document. createElement ("TBODY" ); 
var t1;, t2; 
for (i=0;i<3;i++){ 
tl = document. createElement ("TR"); 
tBodyNode. appendChild(t1); 
for (j=0;j<2;j++){ 

t1 = document. createElement ("TD"); 

t2 = document. createTextNode(contents[i][j]); 

t1.appendChild(t2); 

tBodyNode. childNodes[ i]. appendChild(t1); 


} 

pNode. appendChild( tableNode); 
tableNode. id = "test"; 
tableNode. border = 2; 


tableNode. appendChild( tBodyNode) ; 

} 

</script > 

</head> 

<body id= "tableTest"> 

<h2 onClick = "genTable(tableTest)"> 单 击 此 处 将 生成 一 个 表格 </h2 > 
< hr ></body ></html > 


在 浏览 器 中 显示 结果 如 图 4-16 所 示 。 


于 使 用 DON 生成 一 张 表 格 - 了 icrosoft Internet Explorer 
文件 于 ) 编辑 人 E) 查看 WD) 收 疗 和 工具 XC) 帮助 00 


@Aie- 日 `- 国 国名 且 妹 次 x 加 | 全- 导 


地 址 四) | 多 ] :Ahtml\3-18.htm 


单 击 此 处 将 生成 一 个 表格 


负 名 出 版 社 
[cH 程序 设计 教程 清华 大 学 出 版 社 
Reb 程序 设计 电子 工业 出 版 社 


图 4-16 使 用 DOM 生成 一 张 表格 
【 例 4.52】 用 鼠标 滚轮 放大 和 缩小 图 形 。 


< script language = "javascript"> 
Var count = 10; 

function resizeimg(oImage) { 

count = Counting(count); 
Resize(oImage, count); 

return false; 

} 

function Counting(newzoom){ 

if (event. wheelDelta>= 120) 
newzoomt+ ; // 鼠 标 滚 轮 滚动 120 个 单位 距离 ,就 放大 或 缩小 1% 
else if (event. wheelDelta<= 一 120) 
newzoom 一 一 7 


if (newzoom< 2) newzoom= 2; // 只 允许 缩小 到 20% 
证 (newzoom> 50) newzoom = 50; // 只 允许 放大 到 500 % 
return newzoom; 


function Resize(oImage, newzoom){ 

oImage. style. zoom = newzoom + '0%'; // 设 置 图 片 的 缩放 属性 

Count = newzoom; 

) 

</script > 

< img onDblClick = 'return Resize (this, 10); return false; ' onmousewheel = 'return resizeimg 
(this)' border = "0" src = "upload/upfile/map/cjtj/syt2.gif" width = "500" height = "369"> 
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【 例 4.53】 播放 WMA 或 MP3 等 格式 的 媒体 文件 。 


<html> 
< Script language = "JScript"> 
function CreateControl(DivID，CLSID，ObjectID, WIDTH, HEIGHT, URL, AUTOSTART){ 
var d = document. getElementById(DivID); 
d. innerHTML = < object classid= '+CLSID+ 'id= '+ ObjectID+ 'width= '+WIDTH+ 'height = "+ 
HEIGHT+ > 
<param name = "URL" value=' + URL + '><param name = "autoStart" value =' + AUTOSTART + 
0 
} 
</script > 
<head></head> 
<body> 
<div id= "EXAMPLE DIV_ID"> This text will be replaced by the control </div> 
< script language = "JScript"> 
CreateControl("EXAMPLE DIV_ID","clsid:6BF52A52— 394A— 11d3— B153 - 00C04F79FAA6", 
"EXAMPLE_OBJECT_ID", "300", "200", "file:///C:/TDdownload/ 红 旗 飘 飘 .wma"," 一 1"); 
</script> 
</body> 
</htm]l > 


<! -- 以 下 是 另外 一 种 播放 方法 -一 > 
< htm]l > 

<body> 

<div id= "DivID"> 
< script language = "javascript"> 
var myObject = document. createElement('object') 7 

DivID. appendChild(myObject) ; 
myObject. width = "200"; 
myObject. height = "100"; 
myObject. classid= "clsid:6BF52A52— 394A— 11d3 — B153 — 00C04F79FAA6"; 
myObject. URL = "file:///C:/TDdownload/ 红 旗 款 球 . wma"; 
myObject. uiMode = "none" ; 
</script > 
</body> 
</html > 


4.2.4 HTML DOM 树 简介 


HTML DOM 是 一 种 结构 化 的 对 象 模型 ,采用 DOM 技术 访问 和 更 新 HTML 页 面 内 容 
时 ,首先 依据 HTML 源 代码 ,建立 页 面 的 树 型 结构 模型 ,然后 按照 树 型 结构 的 层次 关系 来 
操纵 Web 页 面 。 图 4-17 所 示 即 为 一 个 Web 页 文件 所 对 应 的 DOM 结 点 树 , 又 称 文档 大 纲 。 

在 DOM 树 型 结构 中 ,每 个 结 点 都 是 一 个 对 象 ,各 结 点 对 象 都 有 属性 和 方法 。 

DOM 有 两 个 对 象 集 合 : attributes 和 childNodes。attributes 是 结 点 属性 的 对 象 集合 。 
childNodes 是 子 结 点 的 对 象 集合 ,使 用 从 0 开始 的 索引 值 进行 访问 。 

DOM 树 型 结构 结 点 有 只 读 属性 和 读 写 属性 两 类 。 通 过 只 读 属 性 可 以 浏览 结 点 ,并 可 
获得 结 点 的 类 型 及 名 称 等 信息 ; 通过 读 写 属性 则 可 以 访问 文字 结 点 的 内 容 。DOM 树 结 点 
的 属性 如 表 4-10 所 示 。 


二 《IDOCTYPE htsl PUBLIC “-//W3C//DTD XHTHL 1.0 Transitional//EN” 
国 Page2.htm 2 “http:/ /wr v3. org/TR/zhtnl1/DTD/xhtall- 2 dtd > 
加 <!DOCTYPE> 3 htn] xnlns="http.//yre v3. orz/1999/xhtel’ 
日 <HTML> head> 
加 园 | <HEap> 计 《title? 无 标题 页 qtitle> 
4 
Cseript id- “nyscript” type="text/javascript"> 
量 me tr wsipt: 
< > 8 seript> 
日 -加 <BopY> 9 Shead> 
+ <H4> 108 Chody id="nybody"> 
加 <r> 1 aa>thi text title Yh4> Chr /> 
12 文本 b>》 
日- p> 13; 
回 <b> 14 
日 国 <TABLE> Fr 
回 <capton> 17 width: 100px">C/td> 
日 国 <TR> 18 ad” style="width; 100px">Chr /7>Gtay 
国 <rp> 19 《td style="width: 100px*>G/td> 
日 国 <TpD> 20 《Xe 
21 tr id="tr2"> 
加 <R> 2 《td style="width: 100px"> 
a 23 Cdiv > div> 
TR 24 Yt 
日 国 < p> ”5 td style="width; 100px”>Cing sre="” /2d ta> 
尼 ] <ov> 5 La denidth 100m 0tt 
日 国 <D> 26 《tr 1d "tr3" 
国 <IM6> 29 td styl 100px*>/ td> 
国 <TD> 30 《td style 100px “> 
自 国 <IR> 31 《input id="Buttonl” type="button” value="button” /2/4d> 
国 cp> 和 《td style="width; 100px”>C/td> 
3 tr> 
日 国 <TD> 3 table> 
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图 4-17 文档 大 纲 


表 4-10 DOM 树 结 点 的 属性 


属 性 访 问 说 明 
nodeName 只 读 返回 结 点 的 标记 名 
nodeType 只 读 返回 结 点 的 类 型 : 1- 标 记 ; 2- 树 型 ; 3- 文 字 结 点 
firstChild 只 读 返回 第 一 个 子 结 点 的 对 象 集合 
lastChild 只 读 返回 最 后 一 个 子 结 点 的 对 象 集合 
parentNode 只 读 返回 父 结 点 对 象 
previousSibling 只 读 返回 左 兄弟 结 点 对 象 
nextSibling 只 读 返回 后 一 个 兄弟 结 点 对 象 
data 读 写 文字 结 点 的 内 容 , 其 他 结 点 返回 undefined 
nodeValue 读 写 文字 结 点 的 内 容 , 其 他 结 点 返回 null 


用 DOM 方法 可 以 动态 创建 HTML 文档 或 HTML 元 素 . 并 可 以 通过 JavaScript 程序 
随时 改变 文档 的 结 点 结构 或 内 容 ,建立 动态 网 页 效果 。DOM 树 的 常用 方法 如 表 4-11 所 示 。 
表 4-11 DOM 树 的 常用 方法 


方法 及 语法 


说 明 


objParent. appendChildCobjChild) 
objChild. appendElement(objParent) 
objNode. SetAttribute(sName, vValue) 
objNode. clearAttributes( ) 

document. createElement (String) 
objNode. cloneNode (deep) 


为 objParent 添加 子 结 点 objChild, 返 回 新 增 结 点 对 象 

将 objChild 新 增 为 objParent 的 子 结 点 

设置 objNode 的 属性 名 和 属性 值 

清除 objNode 的 所 有 属性 

建立 一 个 HTML 结 点 对 象 ,参数 TagName 为 标记 的 名 称 
复制 结 点 objNode, 若 deep 为 false, 则 只 复制 该 结 点 ; 否 
则 ,复制 以 该 结 点 为 根 的 整个 树 
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续 表 
方法 及 语法 说 明 
objNode. hasChildNodes( ) 判断 objNode 是 否 有 子 结 点 , 若 有 则 返回 true, 否 则 返回 false 


objParent. insertBefore (objChild,objSource) 在 结 点 objParent 的 子 结 点 objBrother 之 前 插入 一 个 新 的 
子 结 点 objChild 


ObjTarget. mergeAttributes(objSource) 将 结 点 objSource 的 所 有 属性 复制 到 结 点 objTarget 中 

objNode. removeNode( deep) 删除 结 点 objNode, 若 deep 为 false, 则 只 删除 该 结 点 ; 否 
则 ,删除 以 该 结 点 为 根 的 子 树 

objNode. replaceNode(objNew) 用 结 点 objNew 替换 结 点 objNode 

objNodel. swapNode(objNode2) 交换 结 点 objNodel 与 objNode2 


在 用 createElement 方法 创建 一 个 元 素 时 ,其 中 的 参数 可 以 使 用 表 4-12 中 所 列 
DHTML 对 象 的 名 称 。 对 象 名 称 的 含义 和 标记 名 称 基本 相同 ,具体 说 明 可 参阅 相关 资料 。 


表 4-12 DHTML 对 象 的 名 称 


A acronym ,address ,applet \area \attribute\b base,baseFont,\bgSound,big .blockQuote\body br、button 、 
caption,center,cite,clientInformation clipboardData ,code ,col colGroup comment ,currentStyle custom 、 
dataTransfer dd defaults、del dfn, dir、div、dl、document、dt、em、embed 、event、external fieldSet, font、 
form,\frame, frameSet, FRAMESET elements.、head history, hn、hr、html、HTML Comment,i, iiframe、 
img ,implementation IMPORT \input, input type= button,input type 王 checkbox input type 一 file input 
type= hidden input type = image, input type = password input type= radio, input type = reset input 
type= submit input type= text ins,isIndex, kbd, label, legend, li\ link, listing location map、 marquee、 
menu meta, namespace、 navigator、, nextID, noBR、 noFrames, noScript、 object, ol, optGroup、, option、, P、 
page,param, plainText, popup、 pre、 Q, rt, rule, runtimeStyle、, s, samp, screen, script, select, selection、 
small span、 strike、 strong、 style、 style、 styleSheet、 sub, sup, table、 tBody, td、 textArea、 TextNode、 


TextRange、TextRectangle、tFoot\tHead title tr\tt\u\ul\userProfile var、 wbr, window xml 


例如 创建 一 个 按钮 元 素 : document. createElement(" 过 input type 一 "button' 僵 "); 创建 
一 个 超 链 接 元 素 : document. createElement(" 一 A 二 ")。 下 面 通 过 示例 给 出 DOM 树 的 编 


程 方法 。 

【 例 4. 54】〗 请 读者 体验 以 下 DOM 树 编程 过 程 。 单 击 button 按钮 后 的 执行 结果 如 图 4-18 
所 示 。 

济 无 标题 页 - Microsoft Internet Explorer [zgjx] 可 无 标题 页 - Microsoft Internet Explorer 


| 文 作 虽 。 编 各 日。 查看 收 和 ) 工具 (D ”大助 Hy | | 链接 


this is a text title click me 


段落 文本 了 文本 Te 


DON 树 结 点 示例 DON 树 结 # 
table(l,1) ltable(l,3) 
Ey ee 区 Ws 
I am a Div table (2, 3) 
kable(l,1) [table(, 3) 
tablel3, 1) [Eee table(3, 3) 上 [GD | = - 
BE [厂矿 硫 融 4 山寺 厂 三 太 吏 和 4 


图 4-18 DOM 树 编程 执行 效果 


<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 
< htm]l xmlns = "http://www.w3.org/1999/xhtml" > 
<head> 
<title> 无 标题 页 </title> 
</head> 
<body id = "mybody" bgcolor = # FFFFCC> 
<h4 id= "myH" align = "center" > this is a text title </h4> 
<p id= "myP" align = "center"><b> 段 落 文本 </b></p> 
< table id= "myT" bgcolor = "yellow" align= "center" border = "1" > 
<caption id = "myCaption"> 
DOM 树 结 点 示例 </caption> 
<tr id = "trl"> 
<td style = "width: 100px"> table(1,1)</td> 
<td id = "myid" style= "width: 100px">< hr /></td> 
<td style = "width: 100px"> table(1,3)</td> 
</tr> 
be id= Er 
<td style= "width: 100px"> 
<div ID= "oDiv" align= "center" onclick = "alert('click');" 
‘onmouseover = "this. style. color = '# 0000FF';" 
‘onmouseout = "this. style, color = '# FF0000';">I am a Div</div> 
</td> 
<td style= "width: 100px">< img src = "ad1. jpg" /></td> 
<td style= "width: 100px"> table(2,3)</td> 
</tr> 
<tr id= "tr3"> 
<td style = "width: 100px"> table(3,1)g&nbsp;</td> 
<td style = "width: 100px"> 
< input id = "Button1"type = "button" value = "button" onclick = "dom_ example();" 
/></td> 
<td style= "width: 100px"> table(3,3)</td> 
</tr> 
</table> 
< script type = "text/javascript"> 
function fun_ click() { // 定 义 一 个 事件 函数 
document. getElementById( "mybutton"). style. backgroundColor = "blue"; 
alert("yes, that's me"); 
i 
function dom example() { 
//1. 在 段落 文本 id 为 myP 处 添加 一 个 text 文本 框 标记 ,设置 Value 属性 为 "I am a Text" 
Var nodl = document. createElement ("< input type = 'text >"); 
nod1. setAttribute("value", "I am a Text"); 
myP. insertBefore(nodl ); 


//2. 在 文档 开始 处 添加 一 个 背景 为 红色 的 Div. id 属性 设 为 mydiv, 里 面 添 加 文字 "I am a 
//created DIV" 
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Var nod2 = document. createElement("< div style = 'background — color:red; >"); 
nod2. setAttribute("id", "mydiv"); 
document. body. insertBefore(nod2); 
mydiv. innerText = "I am a created DIV"; 
// 创 建 一 个 按钮 
Var nod3 = document. createElement("< input type = 'button' value = 'click me' id= 'mybutton'>"); 
var mybutton = mydiv. appendChild(nod3); 
// 为 该 按钮 添加 一 个 click 事件 处 理 函 数 
mybutton. attachEvent("onclick" ,fun_click); 
//3. 对 巧 为 myzT 的 table 所 设置 的 所 有 属性 进行 循环 , 读 取 并 显示 出 来 
for(var i=0;i<myT.attributes. length;i++){ 
if(myT.attributes[i]. specified){ 
alert(myT. attributes[i].nodeName+ " =" +myT.attributes[i].nodeValue); 
} 
b 


//4. 将 表格 id 为 trl 的 第 行 和 id 为 tr2 的 第 行进 行 交换 
trl. swapNode( tr2); 


//5. 将 id 为 myH 的 标题 文本 换 成 男 外 一 个 结 点 (前 面 创建 的 nod2 或 mydiv) 
myH, replaceNode( nod2); 


//6. 将 oDiv 的 属性 复制 给 第 二 步 中 创建 的 元 素 mydiv, 但 ID 属性 不 复制 .将 鼠标 在 mydiv 上 移 
// 动 将 会 发 现 事件 属性 也 被 复制 

mydiv. mergeAttributes(oDiv, true); 

// 清除 mydiv 的 属性 可 用 mydiv. clearattributes(); 但 不 清除 事件 属性 


//7. 对 于 表格 第 三 行 的 tr3 来 说 ,有 3 个 单元 格 , 即 有 3 个子 结 点 
if( tr3.hasChildNodes()){ 
// 返 回头 结 点 (第 一 个 单元 格 ) 中 的 内 容 
alert('firstChild= '+ tr3.firstChild. innerHTML) ; 
// 返 回 最 后 一 个 结 点 (第 三 个 单元 格 ) 中 的 内 容 
alert( 'lastChild= '+ tr3. lastChild. innerHTML); 
for (i=0; i<tr3.childNodes.length; it+) { // 对 所 有 子 结 点 循环 


var myrow = tr3. childNodes(i); // 得 到 每 个 子 结 点 对 象 , 即 每 个 单元 格 对 象 
alert(myrow. innerHTML) ; // 显 示 每 个 单元 格 中 的 标记 元 素 信 息 
// 返 回 同胞 结 点 (单元 格 ) 中 的 内 容 


if(i==0)alert(myrow.nextSibling. innerHTML) ; 
// 设 置 最 后 一 个 单元 格 的 内 容 为 一 个 超 链 接 
if(i== tr3.childNodes. length— 1) 
myrow. innerHTML = "<A href = '# > I am a Hyperlink </A>"; 
} 
} 
} 
</script > 
</body> 
</html > 


4.3 如 何 用 jQuery 简化 JavaScript 开发 


4.3.1 jQuery 简介 


jQuery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 框架 。 它 是 由 John Resig 于 2006 
年 初创 建 的 , 它 凭 借 简 洁 的 语法 和 跨 平 台 的 兼容 性 ,大 大 简化 了 JavaScript 开发 人 员 遍 历 
HTML 文档 ,操作 DOM、 人 处 理事 件 、 执 行动 画 和 开发 Ajax 的 操作 。 其 独特 而 优雅 的 代码 风 
格 改变 了 JavaScript 程序 员 的 设计 思路 和 编写 程序 的 方式 。 

jQuery 是 一 个 轻 量 级 的 脚本 ,其 代码 简练 .语义 易 懂 ,支持 CSS 1 一 CSS 3 以 及 基本 的 
XPath 语法 ,能 将 JavaScript 代码 和 HTML 代码 完全 分 离 , 便 于 代码 的 维护 和 修改 , 且 很 容 
易 为 jQuery 扩展 其 他 功能 。jQuery 主要 可 实现 如 下 功能 : 

(1) 获取 文档 中 的 元 素 。jQuery 为 准确 地 获取 需要 检查 或 操作 的 文档 元 素 , 提供 了 可 
靠 而 富有 效率 的 选择 符 机 制 。 

(2) 修改 页 面 外 观 。jQuery 提供 了 跨 浏览 器 的 标准 解决 方案 ,即使 在 页 面 呈现 以 后 , 仍 
能 改变 文档 中 某 个 部 分 的 类 或 者 个 别 的 样式 属性 。 

(3) 改变 文档 的 内 容 。jQuery 能 够 影响 的 范围 并 不 局 限于 简单 的 外 观 变化 ,使 用 少量 
的 代码 ,jQuery 就 能 改变 文档 的 内 容 。 

(4) 响应 用 户 的 交互 操作 。jQuery 提供 了 形形色色 的 页 面 事件 的 适当 方式 ,而 不 需要 
使 用 事件 处 理 程序 , 因 其 使 HTML 代码 看 起 来 杂乱 。 此 外 , 它 的 事件 处 理 API 也 消除 了 经 
常 困扰 Web 开发 人 员 的 浏览 器 不 一 致 性 问题 。 

(5) 为 页 面 添加 动态 效果 。 为 了 实现 某 种 交互 行为 ,设计 者 必须 向 用 户 提供 视觉 上 的 
反馈 。jQuery 内 置 的 一 批 淡 入 、 擦 除 之 类 的 效果 ,以 及 制作 新 效果 的 工具 包 , 为 此 提供 了 
便利 。 

(6) 无 须 刷 新 页 面 从 服务 器 获取 信息 。 这 种 编程 模式 就 是 众所周知 的 Ajax, 它 能 帮助 
Web 开发 人 员 创 建 出 反应 灵敏 .功能 丰富 的 网 站 。jQuery 通过 消除 这 一 过 程 中 的 浏览 器 特 
定 的 复杂 性 ,使 开发 人 员 得 以 专注 于 服务 器 的 功能 设计 。 

(7) 简化 常用 的 JavaScript 任务 。 除 了 这 些 完全 针对 文档 的 特性 之 外 ,jQuery 也 提供 
了 对 基本 的 JavaScript 结构 (例如 迭代 和 数组 操作 等 ) 的 增强 。 

jQuery 是 作为 一 个 js 文件 来 分 布 的 ,可 以 从 jQuery 的 官方 网 站 (http://jquery. com/) 
下 载 最 新 的 jQuery 库 文件 。jQuery 库 有 3 个 版 本 : 压缩 版 .开发 版 和 Visual Studio 文档 
版 。 其 中 开发 版 是 标准 的 JavaScript 文件 ,具有 注释 空格 和 换行 。 压 缩 版 是 将 标准 版 中 的 
所 有 空白 和 注释 删除 以 后 得 到 的 版 本 ,这 个 版 本 文件 更 小 ,下 载 速 度 更 快 ,能 够 提高 网 页 加 
载 速 度 。 

使 用 jQuery 库 不 需要 安装 ,只 需 在 相关 的 HTML 文档 中 简单 地 引用 该 库 文件 的 位 置 。 
方法 与 引用 其 他 JavaScript 文件 相同 ,使 用 Script 标记 通过 src 属性 指定 要 加 载 的 文件 , 例 
如 将 jquery-1. 6. 2.js 放 在 目录 Script 下 ,在 HTML 文档 中 的 代码 如 下 所 示 : 


< script src= "../Script/jquery- 1.6.2.js" type = "text/javascript"></script> 
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4.3.2 ”jQuery 选择 器 


在 jQuery 中 ,无 论 使 用 哪 种 类 型 的 选择 器 ,都 需要 从 一 个 美元 符号 和 一 对 圆 括号 开始 : 
$ ()。 所 有 能 在 样式 表 中 使 用 的 选择 器 ,都 能 放 到 这 个 圆 括号 中 的 引号 内 。$ () 是 最 经 常 
使 用 的 一 个 函数 ,其 实 , $ () 就 是 jQuery 的 别名 ,只 不 过 $ () 语 法 更 简洁 ,语句 更 短 。 

jQuery 使 用 类 似 于 CSS 的 选择 器 查找 页 面 上 的 元 素 , 然 后 进行 各 种 操作 ,如 更 改 样式 、 
读 取 或 设置 文本 、 隐 藏 显示 等 。jQuery 支持 多 种 选择 器 ,常用 的 有 以 下 几 种 : 

1. 元 素 选 择 器 

元 素 选择 器 能 够 选择 某 一 元 素 作为 参数 ,如 a、img、input 等 。 例 如 ,tr 表示 选择 所 有 tr 
元 素 ,div 表示 选择 所 有 div 元 素 。 例 如 给 所 有 表格 加 上 高 亮 的 效果 , 即 随 着 鼠标 移动 始终 
突出 显示 鼠标 下 面 的 行 , 则 可 以 使 用 以 下 代码 实现 : 

$ ("tr"). hover( 

function(){ $ (this).addClass("hightlight");}, 


function(){ $ (this). removeClass("hightlight");} 
) 


上 述 代 码 中 $("tr") 就 选择 了 页 面 中 所 有 的 tr 元 素 ,然后 为 其 鼠标 进入 和 移出 事件 分 
别 编写 事件 处 理 程序 ,添加 和 移 除 高 亮 显示 样式 即 可 。 

2. ID 选择 器 

ID 选择 器 是 指 根据 一 个 元 素 的 ID 来 选择 元 素 。ID 选择 器 的 语法 是 以 # 开头, 紧 接着 
是 元 素 的 ID。 例如 $(" 井 buttonl") 将 选择 ID 为 buttonl 的 元 素 。ID 选择 器 有 时 也 和 元 
素 选 择 器 一 起 使 用 ,例如 $("div # main") 表 示 选 中 ID 为 main 的 div 元 素 。 

3. 类 选择 器 

类 选择 器 可 以 根据 元 素 的 class 属性 进行 选择 。 类 选择 器 的 语法 是 以 . 开头 , 紧 接 着 是 
CSS 类 名 。 例 如 $ (".important") 将 选择 页 面 上 所 有 应 用 了 important 类 的 元 素 。 

4. 后 代 选 择 器 

如 果 在 一 个 选择 器 后 面 有 一 个 空格 ,再 跟 另 外 一 个 选择 器 , 则 表示 选择 包含 在 第 一 个 选 
择 器 中 的 第 二 个 选择 器 。 例 如 ,$("div p") 将 选择 div 中 出 现 的 所 有 p 元 素 。 

5. 子 元 素 选择 器 

如 果 一 个 选择 器 后 面 是 一 个 大 于 号 之 ,后 面 再 跟 另 一 个 选择 器 , 则 表示 选择 直接 包 在 第 
一 个 选择 器 中 的 第 二 个 选择 器 。 注 意 ,这 种 选择 器 与 后 代 选 择 器 不 同 , 后 代 选 择 器 只 要 求 后 
代 关 系 ,而 不 论 直接 或 间接 关系 ,而 子 元 素 选 择 器 只 选择 直接 元 素 。 例 如 : 

$ (document). ready(function(){ 


$ ('# selected - plays > 1i').addClass( 'horizontal'); 
DD); 


上 述 位 于 $0O 〇 函数 中 的 选择 器 的 含义 是 ,查找 ID 为 selected-plays 的 元 素 (# selected- 
plays) 的 子 元 素 ( 过 ) 中 所 有 的 列表 项 (li) 。 


4.3.3 jQuery 中 关于 DOM 的 操作 


使 用 jQuery 最 常见 的 功能 就 是 对 DOM 元 素 操作 ,包括 读 取 和 设置 其 文本 ,修改 其 样 
式 , 添 加 、 删 除 子 元 素 等 。 本 节 将 介绍 如 何 通过 jQuery 实现 常见 的 DOM 操作 。 

对 DOM 元 素 的 一 个 常见 操作 就 是 读 取 或 设置 其 内 容 , 例 如 ,获取 TextBox 的 值 ,设置 
div 标记 中 的 内 容 ,获取 或 设置 表格 某 单元 格 内 文本 等 。jQuery 主要 提供 两 个 函数 (html() 
和 val()) 来 实现 这 些 功 能 。 

第 一 个 函数 是 html() 函数 ,该 函数 有 两 个 作用 ,如 果 函 数 没有 参数 , 则 获取 元 素 内 的 
html 内 容 : 如 果 函 数 有 一 个 参数 , 则 将 元 素 内 容 设置 为 字符 串 参数 所 表示 的 HTML 元 素 。 
其 语法 如 下 : 


html() // 返 回 元 素 内 部 的 html 内 容 
html(content) //content 为 字符 串 , 将 元 素 内 容 设 置 为 content 参数 所 指定 值 


【 例 4.55】 使 用 html 元 素 处 理 元 素 内 容 。 

本 例 演示 html() 函 数 读 取 和 设置 元 素 内 容 。 页 面 上 有 两 个 div 和 两 个 按钮 , 单 击 第 1 
个 按钮 可 以 实现 读 取 第 1 个 div 内 容 并 以 消息 框 的 形式 显示 出 来 。 单 击 第 2 个 按钮 可 以 将 
第 1 个 div 的 内 容 复制 到 第 2 个 div 中 。 代 码 如 下 : 


< htm]l xmlns = "http://www. w3. org/1999/xhtml"> 
<head> 
<title> jQuery 函数 示例 </title> 
< style type = "text/css" > 
div#main> div 
{ 
border :1px dashed silver; 
margin :10px; 
height :100px; 
} 
</style> 
<script src= "js/jquery— 1.4.2.min. js" type= "text/javascript"></script> 
< script type = "text/javascript" > 
$ (function () { 
$ ("#showButton").click(function () { 
var content = $("#divi").html(); 
alert(content); 
DD); 
$ ("#copyButton").click(function () { 
var content = $("#divi").html(); 
$ ("#div2").html(content); 


D); 
DD); 
</script> 
</head> 
<body> 


<div id = "main"> 
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< input type = "button" value = "显示 第 一 个 div 内 容 " id = "showButton" /><br /> 
< input type = "button " value = "复制 第 一 个 div 内 容 到 第 二 个 div 中 " id = "copyButton" /> 


<br /> 
<div id = "div1"> 
<p> 这 是 第 一 个 div 里 的 文字 </p> 
</div> 
<div id = "div2"> 
原来 的 内 容 
</div> 
</div> 
</body> 
</html > 


页 面 运行 结果 如 图 4-19 所 示 。 


jQuery $ 函 数 示例 - Windows Internet Explorer [=] 3 


ers rr [lll rr 
文件 下) 编辑 里 ) 查看 WW) 收藏 天 如) 工具 G) 天 助 0) 

次 收藏 天 | 次 回 时 六 网 站 ”加 ] http--nm tup. tsinehu .， 图 百度 
| | 价 - 轩 - 电 响 ”ID 
ERE 惠 


到” R100% > :: 


图 4-19 使 用 html() 函 数 处 理 元 素 内 容 


jQuery 第 2 个 常用 的 操作 元 素 内 容 的 函数 为 val() 函数 。 这 个 函数 也 有 两 种 用 法 ,如 
果 函 数 没 有 参数 , 则 获取 元 素 的 值 ; 如 果 函 数 有 参数 , 则 将 元 素 的 值 设置 为 参数 的 值 。 
val() 函 数 通 常用 来 获取 和 设置 text、button 等 input 元 素 的 值 。 例 如 ,假设 用 户 在 一 个 ID 


为 yourName 的 文本 框 中 输入 姓名 , 则 可 以 使 用 以 下 语句 向 用 户 问 候 。 


var name = $ ("#yourName").val(); 
alert("hello" + name); 


jQuery 还 提供 了 多 种 途径 更 改元 素 的 样式 。 其 中 一 种 最 简单 ,最 直观 的 方式 是 使 用 


css() 函 数 。css( 〇 函数 可 以 设置 或 获取 元 素 的 css 属性 ,语法 如 下 : 


css(name) // 获 取 名 称 为 name 的 css 属性 
css(name, value) // 将 名 为 name 的 css 属性 设置 为 value 


下 面 的 代码 是 使 用 css() 函 数 的 例子 : 


var back = $ ("#div1i").css("background— color"); // 获 取 divl 的 背景 色 
$ ("#div2").css("background — color", "#eeffee"); // 设 置 div2 背景 色 为 浅 绿 色 


设置 元 素 样式 的 第 2 种 方法 是 使 用 addClass() 函 数 和 removeClass() 函 数 。addClass(O) 向 
元 素 添加 CSS 类 ,removeClass() 函 数 从 元 素 删除 CSS 类 。 所 添加 的 CSS 类 应 该 在 页 面 中 
定义 。 下 面 的 例子 即 演示 addClass() 和 removeClass() 函 数 的 使 用 。 


$ ("#div1").addclass("green"); // 向 divl 添加 green 类 
$ ("#divl").removeClass("red" )7 // 向 divl 删除 red 类 


与 addClass 和 removeClass 密切 相关 的 还 有 一 个 toggleClass 类 ,其 作用 为 在 添加 和 移 
除 CSS 类 之 间 进 行 切 换 。 如 果 元 素 已 经 应 用 了 CSS 类 , 则 将 其 移 除 ,否则 添加 。 用 法 如 下 : 


$ ("#div2"). toggleClass("test"); 


现在 网 页 上 经 常见 到 一 种 表格 的 光 棒 效果 , 即 鼠 标 移动 到 表格 某 行 时 ,该 行 改变 背景 色 高 
亮 显示 ,鼠标 移出 时 恢复 成 普通 颜色 ,从 而 实现 鼠标 移入 行 的 始终 高 亮 显 示 。jQuery 提供 了 一 
个 很 方便 的 函数 来 实现 这 个 功能 ,这 个 函数 就 是 hover() 函 数 。hover() 函 数 语 法 如 下 : 


hover( 
function(){/* 这 里 写 鼠 标 进入 时 要 执行 的 代码 * /}， 
function(){/* 这 里 写 鼠 标 移出 时 要 执行 的 代码 * /} 
0 


hover() 函 数 有 两 个 参数 ,这 两 个 参数 都 是 函数 , 当 鼠 标 进入 时 执行 第 一 个 函数 ,鼠标 移 
出 时 执行 第 二 个 函数 。 利 用 hover() 隐 数 结合 addClass() 函 数 ,可 以 方便 地 实现 鼠标 的 光 
棒 效 果 。 

【 例 4.56】 表格 效果 演示 。 

本 例 演示 一 常用 的 表格 效果 。 首 先 实现 了 光 棒 效果 , 随 着 鼠标 移动 ,鼠标 所 在 行 总 会 高 
亮 显 示 。 另 外 , 当 单 击 某 行 时 ,还 可 以 在 选中 和 非 选中 之 间 进 行 切换 。 


< html xmlns = "http://www. w3. org/1999/xhtm1"> 
<head> 
<title> 表 格 效果 </title> 
<style type = "text/css"> 
. Selected { background — color :#ddeeff; } 
.highlight{ background — color :#ffffee;} 
</style> 
< script src= "js/jquery— 1.4.2.min. js" type = "text/javascript"></script > 
< script type = "text/javascript" > 
$ (function () { 
$ ("tr").click(function () { 
$ (this). toggleClass("selected"); 
1D); 
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$ ("tr"). hover( 
function () { $ (this).addClass("highlight"); }, 
function () { $ (this).removeClass("highlight"); } 
); 
DD); 
</script> 
</head> 
<body> 
<div id = "main"> 
<table> 
<tr> 
<th> 产 品名 称 </th> < th> 产 品 价格 </th> < th> 产 品 生产 日 期 </th> 
</tr> 
<tr> 
<td>MP3</td> <td> 500</td> < td> 2007.1.25 </td> 
</tr> 
<tr> 
< td> 笔 记 本 电脑 </td> < td> 5000 </td> < td> 2007.5.25</td> 
</tr> 
es 
<td> iphone4 </td> < td> 4999 </td> < td> 2010.6.25 </td> 
</tr> 
</table> 


jQuery $$ 函数 示 例 一 Windows Internet Explorer 


一 一 
FO” rr/ 国 [B|ls [x 
文件 F) 编辑 人 E) ”查看 人 收藏 夹 &) 工具 CI) 帮助 人 


从 收 R 天 | 痪 回 过 BF 
| 本 juery 霹 数 示例 


产品 名 称 产品 价格 产品 生产 日 期 
MP3 500 2007.125 
笔记 本 电脑 3000 2007.525 
iphone4 4999 。 2010625 


图 4-20 表格 演示 效果 
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关于 jQuery 中 对 DOM 操作 的 方法 还 有 很 多 。 表 4-13 列 出 了 一 些 常 用 的 访问 DOM 
元 素 的 方法 : 
表 4-13 jQuery 访问 DOM 常见 方法 


EE 数 描 述 
. get() 获得 由 选择 器 指定 的 DOM 元 素 
.index() 返回 指定 元 素 相对 于 其 他 指定 元 素 的 index 位 置 
. size() 返回 与 jQuery 选择 器 匹配 的 元 素 的 数量 
.toArray() 以 数组 的 形式 返回 jQuery 选择 器 匹配 的 元 素 
.attr() 获得 匹配 元 素 的 第 一 个 元 素 指定 的 属性 
.addClass() 增加 类 名 , 即 增加 class 属性 
. removeClass() 删除 类 名 , 即 删除 class 属性 
. toggleClass() 切换 类 名 (存在 则 删除 ,不 存在 则 增加 ) 


4.3.4 ”jQuery 事件 


JavaScript 和 HTML 之 间 的 交互 是 通过 用 户 和 浏览 器 操作 页 面 时 引发 的 事件 来 处 理 
的 。 当 文档 或 者 它 的 某 些 元 素 发 生 某 些 变 化 或 操作 时 ,浏览 器 会 自动 生成 一 个 事件 。 例 如 
当 浏 览 器 装载 完 一 个 文档 后 ,会 生成 一 个 事件 ; 当 用 户 单 击 某 个 按钮 时 ,也 会 生成 事件 。 虽 
然 利 用 传统 的 JavaScript 事件 能 完成 这 些 交 互 ,但 jQuery 增加 并 扩展 了 基本 的 事件 处 理 机 
制 。jQuery 不 仅 提供 了 更 加 优雅 的 事件 处 理 语法 ,而 且 极 大 地 增强 了 事件 处 理 能 力 。 

以 浏览 器 装载 文档 为 例 ,在 页 面 加 载 完毕 后 ,浏览 器 会 通过 JavaScript 为 DOM 元 素 添 
加 事件 。 在 常规 的 JavaScript 代码 中 ,通常 使 用 window. onload 方法 ,而 在 jQuery 中 ,使 用 
的 是 $ (document). ready() 方 法 。$ (document). ready() 方 法 是 事件 模块 中 最 重要 的 一 个 
函数 ,可 以 极 大 地 提高 Web 应 用 程序 的 响应 速度 。jQuery 就 是 用 $ (document). ready() 
方法 来 代替 传统 JavaScript 的 window. onload 方法 的 。 

1, 事件 的 绑 定 

在 文件 装载 完成 后 ,如 果 打 算 为 某 元 素 绑 定 事件 以 完成 某 些 操作 , 则 可 以 使 用 bind() 
方法 来 配对 元 素 并 进行 特定 事件 的 绑 定 。bind() 方 法 的 调用 格式 为 : 


bind(type [, data], fn); 


Bind() 方 法 有 3 个 参数 ,第 一 个 参数 是 事件 类 型 ,包括 blur、focus、load、resize、 scroll、 
unload click、 mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、 
mouseleave ,change,select、submit .keydown、keypress、keyup 和 error 等 ,当然 也 可 以 是 自 
定义 名 称 。 第 二 个 参数 为 可 选 参数 ,作为 event. data 属性 传递 给 事件 对 象 的 额外 数据 对 
象 。 第 三 个 参数 则 是 用 来 绑 定 的 处 理 函数 。 

下 面 通过 一 个 例子 来 了 解 bind() 方 法 的 用 法 。 


$ (document). ready(function( ){ 
$ ('##panel').bind('click', function(){ // 绑 定 click 事件 
$ ('body').addClass( 'large'); // 单 击 ID 为 # panel 的 元 素 时 添加 large 类 样式 
]) 
]) 
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2. 合成 事件 
jQuery 有 两 个 合成 事件 一 一 hover() 方 法 和 toggle() 方 法 ,都 属于 jQuery 自 定义 的 方法 。 
hover() 方 法 的 语法 结构 为 : 


hover(enter, leave); 


Hover() 方 法 用 于 模拟 光标 悬 停 事 件 。 当 光标 移动 到 元 素 上 时 ,会 触发 指定 的 第 1 个 
函数 (enter); 当 光 标 移出 这 个 元 素 时 ,会 触发 指定 的 第 2 个 函数 (leave)。 例 如 : 


$ (document). ready(function(){ 
$ ('#panel'). hover(function( ){ 
$ (this).addclass( 'large'); // 鼠 标 移动 到 该 元 素 上 时 添加 large 类 样式 
}，function(){ 
$ (this). removeClass( 'large'); // 鼠 标 移出 该 元 素 时 移 除 large 类 样式 
1); 
1); 


toggle() 方 法 的 语法 结构 为 : 


toggle(fn1l, fn2, .… , fnN); 


toggle() 方 法 用 于 模拟 鼠标 连续 单 击 事件 : 第 1 次 单 击 元 素 ,触发 指定 的 第 1 个 函数 
(fn1); 当 再 次 单 击 同一 元 素 时 , 则 触发 指定 的 第 2 个 函数 (fn2); 如 果 有 更 多 函数 , 则 依次 
触发 ,直到 最 后 一 个 。 随 后 的 每 次 单 击 重复 对 这 几 个 函数 的 轮番 调用 。 


$ (document). ready(function( ){ 
$ ('#panel'). toggle(function(){ 
$ (this).addClass( 'large'); 
}, function(){ 
$ (this). removeClass( 'large'); // 鼠 标 连 续 单 击 时 添加 和 移 除 large 类 样式 
1D); 
1D); 


jQuery 中 提供 了 许多 创建 动态 效果 的 方法 .下 面 的 toggle() 方 法 与 其 他 方法 一 起 轻松 
地 实现 了 动画 效果 。 

【 例 4.57】 jQuery 动画 效果 演示 。 本 例 演示 一 个 简单 的 jQuery 动画 效果 。 先 折 释 展 
开 一 个 层 , 点 击 后 淡出 ,然后 div 又 发 生 形状 的 变化 。 


< htm]l xmlns = "http://www.w3. org/1999/xhtml"> 

<head> 

<title> jquery 先 淡 出 再 变形 的 动画 </title> 

< style type = "text/css"> 

* {margin: 0;padding: 0;} 

body { font - size: 13px; line - height: 130 % ; padding: 60px } 

#panel { width: 300px; border: 1px solid #0050D0 } 

.head { padding: 5px; background: #96E555; cursor: pointer } 

. content { padding: 10px; text — indent: 2em; border — top: 1px solid #0050D0;display:block; } 
</style> 
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< script type = "text/javascript" src= "js/jquery—1.4.2.min.js"></script > 
< script type = "text/javascript"> 
$ (function(){ 
$ ("#panel h5. head"). toggle(function(){ 
$ (this). next("div. content"). fadeOut(); 
},function(){ 
$ (this). next("div. content"). fadeIn(); 
}) 
]) 
</script> 
</head> 
<body> 
<div id= "panel"> 
<h5 class = "head"> 简 单 的 jQuery 动画 </h5 > 
< div class = "content"> 
展示 使 用 jQuery 生成 动画 效果 的 一 个 小 例子 ,让 一 个 Div 层 先 淡出 然后 再 发 生 形变 ,最 后 
折合 消失 .</div> 
</div> 
</body> 
</htm]l > 


3. jQuery 名 称 冲突 

在 某 些 情况 下 ,可 能 有 必要 在 同一 个 页 面 中 使 用 多 个 JavaScript 开发 库 。 由 于 很 多 库 
都 使 用 $ 标识 符 , 因 此 就 需要 某 种 方式 来 避免 名 称 冲突 。 

为 解决 这 个 问题 ,jQuery 提供 了 一 个 名 叫 . noConflict() 的 方法 ,调用 该 方法 可 以 把 对 
$ 标 识 符 的 控制 权 交 还 给 其 他 库 。 使 用 . noConflict() 方 法 的 一 般 模式 如 下 : 


< script src = "prototype. js" type = "text/javascript"></script > 
< script src = "jquery. js" type = "text/javascript"></script> 
< script type = "text/javascript"> 
jQuery. noConflict(); 
</script> 
< script src = "myscript. js" type = "text/javascript"></script> 


首先 ,页 面包 含 jQuery 之 外 的 库 ( 这 里 是 Prototype 库 )。 然 后 ,包含 jQuery 库 ,并 取得 
对 $ 的 使 用 权 。 接 着 ,调用 . noConflict() 方 法 让 出 $ ,以 便 将 控制 权 交 给 最 先 包含 的 库 
(Prototype)。 这 样 ,就 可 以 在 自 定义 脚本 中 使 用 两 个 库 了 。 但 是 ,在 需要 使 用 jQuery 方法 
时 ,必须 记 住 要 用 jQuery 而 不 是 $ 来 调用 。 

由 于 jQuery 是 为 处 理 HTML 事件 而 特别 设计 的 ,所 以 为 了 让 代码 更 恰当 且 更 易 维护 ， 
最 好 遵循 以 下 原则 : 

。 把 所 有 jQuery 代码 置 于 事件 处 理 函 数 中 ; 

。 把 所 有 事件 处 理 函 数 置 于 文档 就 绪 事件 处 理 器 中 ; 

。 把 jQuery 代码 置 于 单独 的 .js 文件 中 ; 

。 如 果 存 在 名 称 冲 突 , 则 重 命 名 jQuery 库 。 

表 4-14 列 出 了 jQuery 常用 的 一 些 事件 方法 。 
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表 4-14 jQuery 常用 事件 方法 
方 法 描 述 
bind() 向 匹配 元 素 添加 一 个 或 更 多 事件 处 理 器 
blur() 触发 或 将 函数 绑 定 到 指定 元 素 的 blur 事件 
change() 触发 或 将 函数 绑 定 到 指定 元 素 的 change 事件 
click() 触发 或 将 函数 绑 定 到 指定 元 素 的 click 事件 
dblclick() 触发 或 将 函数 绑 定 到 指定 元 素 的 double click 事件 
delegate() 向 匹配 元 素 的 当前 或 未 来 的 子 元 素 附加 一 个 或 多 个 事件 处 理 器 
error() 触发 或 将 函数 绑 定 到 指定 元 素 的 error 事件 
focus() 触发 或 将 函数 绑 定 到 指定 元 素 的 focus 事件 
keydown() 触发 或 将 函数 绑 定 到 指定 元 素 的 key down 事件 
keypress() 触发 或 将 函数 绑 定 到 指定 元 素 的 key press 事件 
keyup() 触发 或 将 函数 绑 定 到 指定 元 素 的 key up 事件 
load() 触发 或 将 函数 绑 定 到 指定 元 素 的 load 事件 
ready() 文档 就 绪 事 件 ( 当 HTML 文档 就 绪 可 用 时 ) 
resize() 触发 或 将 函数 绑 定 到 指定 元 素 的 resize 事件 
scroll() 触发 或 将 函数 绑 定 到 指定 元 素 的 scroll 事件 
submit() 触发 或 将 函数 绑 定 到 指定 元 素 的 submit 事件 
toggle() 绑 定 两 个 或 多 个 事件 处 理 器 函数 , 当 发 生 轮 流 的 click 事件 时 执行 
trigger() 所 有 匹配 元 素 的 指定 事件 


4.4 DHTML 综合 编程 实践 


4.4.1 广告 条 定时 滚动 


功能 描述 : 定时 滚动 广告 条 。 共 有 3 个 广告 条 ,每 个 广告 条 中 有 6 条 超 链接 。 页 面 显 
示 10s 后 才 开 始 广告 滚动 。 将 鼠标 放 到 广告 条 上 就 停止 滚动 ,鼠标 离开 广告 条 继续 滚动 。 


< HTML>< HEAD >< TITLE ></TITLE> 
< META http ~ equiv = Content ~ Type content = "text/html; charset = gb2312"> 
< STYLE type = "text/css"> 
TD {FONT - SIZE: 12px; COLOR: #000000; FONT - FRMILY: 宋体 } 
af color: #000000;} 
A:link {TEXT — DECORATION: none} 
A:visited {TEXT — DECORATION: none} 
A:active {TEXT — DECORATION: none} 
A:hover {TEXT - DECORATION: underline} 
</STYLE> 
< META content = "MSHTML 6.00.2800.1515" name = GENERATOR ></HEAD> 
< BODY leftmargin= "0" topmargin = "0" marginwidth= "0" marginheight = "0"> 
< TABLE id= "tablel" style = "BORDER— COLLAPSE: collapse" cellPadding= 1 width = 468 border = 0> 
< TBODY> 
<TR> 
<TD width= "380"> 


<DIV id = "sol"> 

<table width = "380" border = "0" align = "center" cellpadding = "0" cellspacing = "0"> 
<TBODY> <tr> 
<td height = "20"><a href = "url1l" target = "_ blank"> 重 庆 大 学 </a></td> 
<td height = "20"><a href = "url2" target = "_blank"> 精 美 图 片 </a></td> 
<td height = "20"><a href = "url3" target = _blank> 学 习 论 坛 </a></td> 
<td height = "20"><a href = "url4" target = _blank> 电 视 娱乐 </a></td> 
<td height = 20><a href = "ur15" target = _blank > 娱乐 星 闻 </a></td> 
<td height = 20><a href = "ur16" target = _blank > happyb 中 文 </a></td> 
</tr> </TBODY > 
</table> 


< TABLE width = 380 cellSpacing = 0 cellPadding = 0 border = 0> 
<TBODY>< tr> 
<td height = 20><a href = "urll" target = _blank> 小 木屋 </a></td> 
<td height = 20><a href = "url2" target = _blank> 易 物 在 线 超市 </a></td> 
<td height = 20><a href = "url3" target =_blank > 通州 论坛 </a></td> 
<td height = 20><a href = "url4" target =_blank> 00 宝典 资源 </a></td> 
<td height = 20><a href = "url5" target = _blank> 冰 霄 娱乐 </a></td> 
<td height = 20><a href = "ur16" target =_blank > 时 尚 元 素 网 </a></td> 
</tr ></TBODY > 
</table> 


< TABLE width = 380 cellSpacing = 0 cellPadding = 0 border =0> 
<TBODY>< tr> 
<td height = 20><a href = "urll" target = _blank > 动感 FLASH</a></td> 
<td height = 20><a href = "url2" target = _blank > 在线 MTV 欣赏 </a></td> 
<td height = 20><a href = "url3" target = _blank> MP3 音乐 </a></td> 
<td height = 20><a href = "url4" target =_blank > 心动 游戏 网 </a></td> 
<td height = 20><a href = "url5" target =_blank>07007 音乐 </a></td> 
<td height = 20><a href = "ur16" target =_blank > 图 片 广 场 </a></td> 
</tr ></TBODY > 
</TABLE> 
</DIV> 
<DIV id = so2 style= "2Z— INDEX:1;VISIBILITY:hidden; POSITION:absolute"> 
</DIV></TD></TR></TBODY ></TABLE > 
< SCRIPT type = "text/javascript"> 
marqueesHeight = 20; 
stopscroll = false; 
document.all. sol. scrollTop= 0; 
with(sol){ 
style. width= 380; 
style. height = marqueesHeight; 
style. overflowX = 'visible'; 
style. overflowY = 'hidden'; 
noWrap = true; 
‘onmouseover = new Function( 'stopscroll = true'); 
‘onmouseout = new Function( 'stopscroll = false'); 
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preTop = 0; currentTop = 0; stoptime= 0; // 参 数 初 始 化 


function init srolltext(){ 

document. al1. so2. innerHTML = ""; 

document. all. so2. innerHTML + = document.all. sol. innerHTML; 

document. all. sol. innerHTML = document. al1. so2. innerHTML + document. all. so2. 
innerHTML; 

setInterval( 'scrollUp()',1); // 设 置 每 秒 钟 就 更 换 一 次 广告 

} 


function scrollUp( ){ 
if(stopscroll = 
CurrentTop+ = 


= true) return; 


了 
if(currentTop== 21) { 
stoptime+ =1; 
currentTop— =1; 
if(stoptime == 150) { 
currentTop= 0; 
stoptime= 0; } 
} 
else { 
preTop = document. all. sol. scrollTop; 
document. al1. sol. scrollTop+ =1; 
if(preTop == document.all. sol. scrollTop){ 
document. all. sol. scrollTop = document. all. so2. offsetHeight - marqueesHeight; 
document. all. sol. scrollTop+ =1;} 
} 
) 
setTimeout('init srolltext()', 10000) // 页 面 显示 秒 钟 后 才 开 始 广 告 条 滚动 
</script > 
</BODY ></HTML > 


4.4.2 通过 URL 传递 参数 


功能 描述 : 有 两 个 HTML 页 面 文档 ,分 别 是 start. htm 和 index. htm, 要 从 start. htm 
中 将 相关 参数 通过 url 地 址 传送 到 index. htm 页 面 ,在 index. htm 中 显示 传 过 来 的 参数 。 
在 url 地 址 中 用 问号 后 附带 参数 的 方法 传递 参数 ,每 个 参数 之 间 用 & 相隔 。 

例如 ,"url 二 http://aa. com/index. htm? email 二 pp@cqu. edu. cn&name 二 wcl" 中 传 
递 了 两 个 参数 email 和 name ,它们 的 值 分 别 是 pp@cqu. edu. cn 和 wcl。 


start. htm 文件 内 容 如 下 : 

<html >< head > 

<title> 通 过 URL 传递 参数 </title> 

</head> 

<body> 

< script type = "text/javascript"> 

window. open( "index. htm?email = pp@cqu. edu. cn&name = wcl","_self"); 
</script > 


</body> 
</html > 
index. htm 文件 内 容 如 下 : 
<! -- 下 面 给 出 了 一 个 带 有 详细 注释 的 具体 示例 源 代码 . 注意 : QueryString 是 一 个 实用 函数 ,可 以 
在 网 页 中 直接 引用 ,然后 在 网 页 中 使 用 Request[ "名称"] 即 可 获取 用 户 输入 的 有 关 信 息 内 容 . --> 
<Html >< Head> 
<Meta http - equiv = "Content - Type"content = "text/html; charset = gb2312" > 
<Title> 示 例 </Title> 
< script type = "text/javascript"> 
function QueryString() 
{// 构 造 参数 对 象 并 初始 化 
Var name value, i; 
var str = location. href; // 获 得 浏览 器 地 址 栏 URL 串 
Var num = str, indexOf("?") 
str = str. substr(num+ 1); // 截 取 "?" 后 面 的 参数 串 
var arrtmp = str. split("&"); // 将 各 参数 分 离 形 成 参数 数组 
for(i=0;i<arrtmp.length;i++){ 
num= arrtmp[ i]. indexOf(" = "); 


if(num> 0){ 
name = arrtmp[ i]. substring(0, num); // 取 得 参数 名 称 
value = arrtmp[i]. substr(num + 1); // 取 得 参数 值 
this[name] = value; // 定 义 对 象 属性 并 初始 化 
} 
} 
} 
Var Request = new QueryString( ); // 使 用 new 运算 符 创建 参数 对 象 实例 
</script > 
</Head> 
<Body> 
<script> 


Var newElement = document. createElement("div"); // 创 建 div 对 象 

var str= "<u>" + Request["name"] + "</u>, 欢 迎 光 临 !< br > 您 的 E-mail 是 :<u>" + Request [" 
email" ] + "</u>"; // 利 用 Request[ "字段 名 称 "] 获 取 参 数 内 容 
newElement. innerHTML = str; 

document. body. appendChild( newElement); // 向 文档 添加 div 对 象 

</script > 

</Body> 

</Html> 


4.4.3 超 文 本 编辑 器 及 其 与 Word 的 互 操作 


功能 描述 : 用 Iframe 帧 标记 实现 文本 和 超 文本 编辑 器 功能 ,可 以 将 编辑 框 中 的 内 容 
自动 放 到 Word 中 让 用 户 编辑 ; 可 将 用 户 在 Word 中 编辑 过 的 文档 内 容 自 动 放 到 编辑 
框 中 。 
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< htm]l >< head> 
<meta http - equiv = "Content — Type" content = "text/html; charset = gb2312"> 
<title> 具 有 超 文本 编辑 功能 的 文本 编辑 框 </title></head> 
< script language = "javascript" > 
var WordApp; 
var wordflag= 0; 
var myRange; 
function OpenWord( ) // 在 Word 中 编辑 
|! 

onerror = errormsg; 

WordApp = new ActiveXObject("Word. Application"); 

WordApp. Application. Visible = true; 

Var mydoc = WordApp. Documents. Add("",0,1); 

myRange = mydoc. Range(0,1) 

if(myiframe. document. body. innerText == "") 

{ 

myiframe. document. body. innerText = " "; 

} 

Var sel = myiframe. document. body. createTextRange( ); 

sel. select(); 

myiframe. document. execCommand( 'Copy'); 

sel. moveEnd!( 'character'); 

myRange. Paste( ); 


WordApp. ActiveWindow. ActivePane. View. Type = 3; // Word 视图 模式 为 页 面 
WordApp. Selection. EndKey(5); 
WordApp. Selection. InsertBreak(7); // 插入 分 页 符 


WordApp. Selection. HomeKey (5); 
WordApp. Selection. TypeText(" 重 庆 市 房产 面积 测算 报告 书 "); 


function LoadWord( ) // 更 新 编辑 文档 
{ 

onerror = errormsgl; 

WordApp. Selection. WholeStory() 

WordApp. Selection. Copy( ) 

WordApp. Selection. Delete() 

myRange. Paste( ) 

newDocument( ) 

myiframe. document. execCommand( 'Paste') 

for(i = WordApp. Documents. Count;i>0;i-— ){ 

WordApp. Documents(i).Close(0); 

} 

WordApp. Application. quit() 
} 
function errormsg( ) 
{ 

alert(" 请 确认 是 否 装 有 Word 如 果 装 有 请 确认 \r 是 否 焉 的 安全 选项 \" 本 地 Intranet\" 级 别 \r 已 

被 设 为 \" 低 \" 否 则 将 不 能 使 用 此 功能 , 步骤 如 下 :\r 工具 一 \> Internet 选项 -> 安全 \r 一 \> 本 地 
Intranet- \> 自 定义 级 别 - \> 第 二 项 选 为 启用 或 提示 "); 


return true; 
! 
function errormsgl() 


alert("Word 没 打开 或 者 Word 已 经 关闭 ! 请 打开 Word 编辑 后 再 更 新 !") 


return true; 
} 
function initpage() // 初 始 化 正文 编辑 器 
{ 
证 (document.all.myiframe) { 
myiframe. document. designMode = "On"; 
myiframe. document. open( ); 
myiframe. document. write("<div><br></div>"); 
myiframe. document. close( ); 
! 
: 
function newDocument( ) // 清 除 正文 内 容 
{ 
myiframe, document. designMode = "On"; 
myiframe. document. open( ); 
myiframe. document. write(""); 
myiframe. document. close( ); 
myiframe. focus( ) 


} 


var format = "HTML"; 
function swapModes( ) // 切 换 编辑 状态 
{ 
if (format == "HTML") { 

myiframe. document. body. innerText = myiframe. document. body. innerHTML 
myiframe. document. body. style. fontFamily = "arial"; 
myiframe. document. body. style. fontSize = "10pt"; 
format = "Text"; 


} 
else{ 
myiframe. document. body. innerHTML = myiframe. document. body. innerText; 
myiframe. document. body. style. fontFamily = ""; 
myiframe. document. body. style. fontSize = ""; 
format = "HTML"; 
} 
</script > 


<body onload = "initpage();" bgcolor = "#FFFFCC" > 

< input id = "B0" type = "button" value = "切换 编辑 状态 " onclick = "swapModes();"> 
< input id = "B1" type = "button" value = "打开 Word 编辑 " onclick = "OpenWord();"> 
< input id = "B2" type = "button" value = "从 Word 中 调和 人 " onclick = "LoadWord();"> 
< input id = "B3" type = "button" value = "清空 " onclick = "newDocument();"><br /> 
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< IFRAME id = "myiframe" marginWidth = 2 marginHeight = 2 width = "50%" height = "50%" ></ 


IFRAME > 
</body></html > 
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4.4.4 表格 的 美化 


功能 描述 : 美化 表格 的 JavaScript 自 定义 函数 。 其 功能 包括 : 可 设置 表格 行 的 交替 
颜色 ; 加 当 鼠 标 在 表格 上 移动 时 ,以 某 颜色 区 别 显 示 鼠 标 指针 所 在 表格 行 ; @ 当 鼠标 选中 
某 行 时 ,高 亮 显 示 该 行 。 

// 标题 : beautify tables 

// 描述 : 美化 表格 .1. 设 置 表格 行 的 交 蔡 颜色 ; 2. 当 鼠 标 在 表格 上 移动 时 , 以 某 颜 色 区 别 显示 鼠标 

// 指 针 所 在 表格 行 ; 3. 当 鼠 标 选中 某 行 时 ,高 亮 显示 该 行 . 


// 版 本 : 1.0 
// 日 期 : 2002- 03 -04 


function beau tables ( 


str_tableid, // table 的 id 属性 ( 必 选 项 ) 

num_header offset, // 表格 头 部 无 须 美 化 的 行 数 (可 选项 ) 
num_footer_offset,， // 表 格 尾 部 无 须 美 化 的 行 数 (可 选项 ) 
str_odd_color, // 奇数 行 背景 颜色 (可 选项 ) 
str_even_color, // 偶数 行 背景 颜色 (可 选项 ) 

str_mover color, // background color for rows with mouse over (opt.) 
str_onclick color // background color for marked rows (opt.) 
| 

// 浏览 器 不 支持 DOM 则 返回 

if (typeof(document.all) ! = 'object') return; 

// 验证 传递 的 参数 


if (!str_tableid) return alert ("没有 指定 表格 的 ID 参数 !"); 
var obj_tables = (document.all ? document.all[str tableid] : 
document. getElementById( str_tableid) ) ; 
// 如 果 有 多 个 表格 , 则 可 能 返回 是 数组 
if (!obj_tables) return alert (" 找 不 到 ID 为 " + str_tableid+ "的 表格 "); 


// 为 可 选 输入 项 指定 默认 参数 

var col_config = []; 

col_config. header offset = (num header offset ? num header offset : 0); 
col_config. footer offset = (num footer offset ? num footer offset : 0); 
col_config.odd color = (str_odd color ? str_odd color : '#ffffff"); 

col_config. even color = (str_even color ? str _ even color : '#dbeaf5'); 

col _config. mover color = (str mover color ? str mover color : '#6699cc'); 
col_config. onclick_ color = (str onclick color ? str onclick color : '#4C7DAB'); 


// init multiple tables with same ID 
if (obj_tables. length) 
for (var i = 0; i<obj tables.length; it++)  ”// 对 多 个 表格 依次 处 理 
tt_init table(obj_ tables[il], col config); 
else 
tt_init table(obj_tables, col_config); // 对 单个 表格 的 处 理 
. 


function tt_init table (obj table, col config) 


var col lconfig = [], 
col trs = obj_ table. rows; 

// 为 表格 每 行 设置 相关 属性 和 事件 , 跳 过 表 头 和 表 尾 不 作 处 理 的 行 
for (var i= col config. header offset; i<col trs. length — col config. footer offset;it+) { 
col_trs[i].config = col_config;// 为 TR 追加 设置 的 自 定义 属性 当前 的 行 
col_trs[i].lconfig = col_lconfig;// 为 TR 追加 设置 的 自 定义 属性 移 到 的 行 
col_trs[i]. set_color = tt_set_color;// 为 TR 追加 设置 的 自 定义 事件 


col_trs[i].onmouseover = tt mover; 

col trs[i].onmouseout = tt mout; 

col trs[il].onmousedown = tt onclick; 

// 为 TR 追加 设置 的 自 定义 属性 

col_ trs[il].order = (i - col config.header offset) % 2; 
Col_trs[i].onmouseout(); 


} 


function tt_set color(str color) { 
this. style. backgroundColor = str color; 
| 


// 事件 处 理 程序 
function tt_mover () { 
if (this. lconfig. clicked ! = this) 
this. set_color(this. config. mover_color); 
function tt _mout () { 
if (this. lconfig. clicked ! = this) 
this. set_color(this. order ? this. config. odd_color : this. config.even color); 


! 
function tt_onclick () { 
if (this. lconfig. clicked == this) { 
this. lconfig. clicked = null; 
this. onmouseover( ); 
| 
else{ 
var last clicked = this.lconfig.clicked; 
this. lconfig. clicked = this; 
if (last clicked) last clicked. onmouseout(); 
this. set_color(this. config. onclick color); 
ji 


思考 练习 题 


1. DHTML 的 组 成 是 什么 ? 
2. JavaScript 脚本 语言 有 哪些 特点 ? 它 与 Java 语言 的 区 别 是 什么 ? 
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3 
4 
5 
6. 
7 
8 
9 


1 


. JavaScript 中 如 何 创建 对 象 ? 

. JavaScript 主要 内 置 对 象 有 哪些 ?如 何 利 用 JavaScript 进行 事件 编程 ? 
. 如 何 通 过 HTML DOM 操纵 HTML 元 素 ? 

HTML DOM 树 在 Web 开发 中 有 什么 作用 ? 

.jQuery 中 子 元 素 选择 器 与 后 代 选 择 器 有 什么 不 同 ? 

.怎样 通过 jQuery 操作 DOM 元 素 ? 

.如何 避免 jQuery 的 名 称 冲 突 ? 

0. 对 本 章 每 个 例子 进行 上 机 练习 。 
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学 习 要 点 

(1) XML 文档 的 基本 结构 。 

(2) 如 何 用 CSS 在 浏览 器 中 控制 XML 文档 的 显示 ? 

(3) 如 何 用 XSL 控制 XML 文档 在 浏览 器 中 的 显示 ? 

(4) 什么 是 XML 数据 岛 ? 

(5) XML DTD 和 XML Schema 的 作用 是 什么 ? 

(6) 了 解 XML DTD 的 构成 以 及 如 何 描述 XML 文档。 
(7) 如 何 通过 VS 2010 来 定义 和 生成 XML Schema 文件 ? 
(8) 如 何 进行 XML DOM 的 程序 设计 ? 

(9) XPath、XPointer、XLink 在 XML 中 分 别 起 什么 作用 ? 
(10) XML 文档 和 数据 库 系统 之 间 的 数据 交换 。 

(11) XML 技术 的 应 用 和 发 展 趋势 。 


于 1998 年 问世 的 XML(eXtensible Markup Language) 是 以 SGML( 标 
准 通用 标记 语言 ) 为 基础 的 。SGML 是 一 个 国际 标准 ,可 以 将 其 理解 为 定义 
其 他 文档 标记 语言 的 语言 。SGML 难于 使 用 ,而 XML 的 目标 就 是 要 变 得 更 
加 简单 易 用 。HTML 也 是 基于 SGML 的 。1999 年 W3C 组 织 提出 了 
XHTML(eXtensible HTML) ,XHTML 使 用 XML 语法 构造 规则 对 HTML 
进行 了 改写 。XHTML 文档 的 构造 规则 比 HTML 要 精确 得 多 。 这 些 规则 的 
严格 程度 取决 于 在 XHTML 页 面 中 所 指定 的 文档 类 型 声明 (DOCTYPE)。 

从 1998 年 起 ,许多 厂商 (如 Adobe、IBM、 微 软 、Netscape、Oracle 和 Sun) 
开始 使 用 XML 标准 , 且 视 XML 为 关键 技术 。 目 前 许多 工具 和 软件 例如 
Navigator Internet Explorer 及 RealPlayer 等 ,都 已 经 在 软件 内 部 使 用 XML 
技术 。XML 文档 使 数据 易于 共享 。 一 系列 相关 的 W3C 推荐 标准 解决 了 
XML 文档 内 进行 转换 .显示 和 导航 的 问题 。 

学 习 XML 之 前 ,必须 明确 XML 的 特点 : XML 不 是 一 个 语言 , 它 的 规则 
用 来 构造 其 他 语言 ; XML 创建 了 用 来 标记 内 容 的 基于 标签 的 语言 ; 
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XHTML 是 由 XML 创建 的 语言 的 一 种 ,也 是 对 HTML 的 重新 构造 ; XML 是 基于 
SGML 的 。 

XML 技术 已 成 为 Web 开发 中 很 重要 的 一 项 技术 。 很 多 读者 可 能 存在 “什么 是 XML? 
XML 能 做 什么 ?使 用 XML 能 带 来 什么 好 处 ? XML 能 不 能 替代 数据 库 ? XML 会 取代 什 
么 ? XML 的 发 展 前 景 如 何 ? 如 何 利用 XML 来 进行 程序 设计 ?等 诸如 此 类 的 问题 。 通 过 
本 章 的 学 习 我 们 可 从 中 找到 全 部 答案 。 


5.1 XML 基础 


5.1.1 XML 的 概念 


今天 ,XML(eXtensible Markup Language, 可 扩展 标记 语言 ) 已 成 为 W3C 推荐 使 用 的 
标准 ,是 整个 Web 的 基本 结构 和 未 来 技术 发 展 的 基础 。 什 么 是 XML? 

。 XML 是 一 种 类 似 于 HTML 的 标记 语言 ; 

。 XML 是 用 来 描述 数据 的 ; 

。 XML 的 标记 不 是 在 XML 中 预定 义 的 ,你 必须 定义 自己 的 标记 ， 

。 XML 使 用 文档 类 型 定义 (DTD) 或 者 模式 (Schema) 来 描述 数据 ; 

。 XML 使 用 DTD 或 者 Schema 后 就 是 自 描述 的 语言 。 

从 上 面 XML 定义 来 看 ,应 清楚 以 下 几 点 : 

(1) 可 以 用 XML 来 定义 标记 , 它 和 HTML 是 不 一 样 的 ,XML 的 用 途 比 HTML 广泛 
得 多 ; XML 并 不 是 HTML 的 替代 。 

(2) XML 不 是 HTML 的 升级 , 它 只 是 HTML 的 补充 ,为 HTML 扩展 更 多 功能 ,我 们 
仍 将 在 较 长 的 一 段 时 间 里 继续 使 用 HTML, 但 基于 XML 格式 的 XHTML 将 逐步 取代 
HTML。 

(3) 不 能 用 XML 来 直接 写 网 页 。XML 文档 存放 自 描述 的 数据 ,必须 转换 成 HTML 
格式 后 才能 在 浏览 器 上 显示 。 

一 个 简单 的 XML 文档 内 容 如 下 所 示 : 


<?xml version = "1.0"?> 
< book> 
<title> XML 语言 及 应 用 </title> 
<author > 华 锭 平等 </author> 
<publisher > 清华 大 学 出 版 社 </publisher> 
<publishdate> 200509 </publishdate> 
</book> 


其 中 book、title、author、publisher、publishdate 都 是 自 定义 的 标记 (tag) 。 


5.1.2 XML 的 特点 
1. XML 的 可 扩展 性 
XML 具有 的 扩展 性 ,正体 现 了 XML 的 强大 功能 和 弹性 。 在 HTML 里 ,我们 需 熟 悉 许 
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多 固定 标记 后 再 使 用 这 些 标 记 。 而 XML 中 ,可 建立 任何 需要 的 标记 。 可 充分 发 挥 想象 力 
给 文档 起 一 些 好 记 的 标记 名 称 。 例 如 文档 里 包含 一 些 游戏 的 攻略 ,可 以 建立 一 个 名 为 
去 game> 的 标记 ,然后 在 二 game 之 下 再 根据 游戏 类 别 建立 二 RPG 字 .二 SLG 二 等 标记 。 只 
要 清晰 ,易于 理解 ,可 以 建立 任何 数量 的 标记 。 

扩展 性 意味 着 更 多 的 选择 和 强大 的 能 力 , 但 同时 也 产生 了 一 个 问题 就 是 必须 学 会 规划 。 
应 清楚 文档 由 哪 几 部 分 组 成 ,相互 之 间 的 关系 和 如 何 去 识 别 它 们 。 

2. XML 标记 的 描述 性 

标记 (tag) 又 叫 标识 ,也 称 元 素 名 ,用 于 描述 数据 ,标识 文档 中 的 元 素 。 不 论 是 HTML 
还 是 XML, 标记 的 本 质 在 于 便于 理解 ,如 果 没 有 标记 ,文档 在 计算 机 看 来 只 是 一 个 很 长 的 字 
符 串 ,每 个 字符 串 看 起 来 都 一 样 ,没有 重点 之 分 。 通 过 标记 ,文档 才 便 于 阅读 和 理解 。XML 
的 扩展 性 允许 为 文档 建立 更 合适 的 标记 。 不 过 ,标记 只 是 用 来 识别 信息 , 它 本 身 并 不 传达 
信息 。 

3. XML 语言 的 规则 性 

要 遵循 特定 的 XML 语法 来 标识 文档 。 虽 然 XML 的 扩展 性 允许 创建 新 标识 ,但 它 仍 必 
须 遵循 特定 的 结构 .语法 和 明确 的 定义 。XML 的 标记 有 如 下 规则 : 

。 所 有 的 标记 都 必须 有 一 个 相应 的 结束 标记 ; 

。 所 有 XML 标记 都 必须 合理 嵌 套 ， 

。 所 有 XML 标记 都 区 分 大 小 写 ; 

。 所 有 标记 的 属性 都 必须 用 引号 “"” 括 起 来 ; 

。 名 字 中 可 以 包含 字母 ,数字 以 及 下 划 线 ; 

。 名 字 不 能 以 下 划 线 开头 ,不 能 用 诸如 XML 的 关键 字 来 开头 ， 

。 名 字 中 不 能 包含 空格 。 

在 XML 文档 中 的 任何 差错 都 会 得 到 同一 个 结果 : 不 能 转换 成 HTML, 即 网 页 不 能 被 
显示 。 各 浏览 器 开发 商 已 经 达成 协议 ,对 XML 实行 严格 而 挑剔 的 解析 ,任何 细小 的 错误 都 
会 被 报告 。 

4. XML 文档 的 结构 化 

XML 促进 文档 结构 化 ,所 有 的 信息 按 某 种 关系 排列 。 也 就 是 说 ,结构 化 为 XML 文档 
建立 了 一 个 框架 ,就 像 写 文章 之 前 有 一 个 提纲 一 样 。 结 构 化 使 文档 看 起 来 不 会 杂乱 无 章 ,每 
一 个 部 分 紧密 联系 ,形成 一 个 整体 。 结 构 化 有 下 面 两 个 原则 : 

。 每 一 部 分 (每 一 个 元 素 ) 都 和 其 他 元 素 有 关联 。 关 联 的 级 数 形成 了 结构 。 

。 标记 本 身 的 含义 与 它 描述 的 信息 相 分 离 。 

5. 允许 meta 数据 (元 数据 ) 


专业 的 XML 使 用 者 都 会 使 用 meta 数据 来 工作 。HTML 中 我 们 知道 可 以 使 用 meta 
标记 来 定义 网 页 的 关键 字 ,简介 等 ,这 些 标记 不 会 显示 在 网 页 中 ,但 可 以 被 搜索 引擎 搜索 到 ， 
并 影响 搜索 结果 的 排列 顺序 。XML 对 这 一 原理 进行 了 深化 和 扩展 ,可 以 用 XML 描述 信息 
在 哪里 ,可 以 通过 meta 来 验证 信息 、 执 行 搜索 .强制 显示 或 者 处 理 其 他 数据 。 

下 面 是 一 些 XML metadata 在 实际 应 用 中 的 用 途 : 可 用 于 数字 签名 ,使 在 线 商 务 的 提 
交 动 作 有 效 ; 可 以 建立 索引 和 进行 更 有 效 的 搜索 ; 可 以 在 不 同 语言 之 间 传 输 数 据 。W3C 组 
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织 正 在 研究 一 种 名 为 RDF (Resource Description Framework) 的 metadata 处 理 方法 ,可 以 
自动 交换 信息 ,W3C 宣称 ,使 用 RDF 配合 数字 签名 ,将 使 网 络 中 存在 “真实 可 信 ” 的 电子 
商务 。 

6. XML 的 多 样 显示 性 

单独 的 XML 文档 使 用 格式 化 技术 ,比如 CSS 或 者 XSL, 才 能 在 浏览 器 中 显示 。XML 
将 数据 和 格式 分 离 。XML 文档 本 身 并 不 知道 如 何 显示 数据 ,而 必须 由 辅助 文件 来 帮助 实 
现 。XML 中 用 来 设 定 显示 风格 样式 的 文件 类 型 有 : 

1) XSL 

XSL(eXtensible Stylesheet Language, 可 扩展 样式 语言 ) 是 将 来 XML 文档 显示 的 主要 
文件 类 型 。 它 本 身 也 是 基于 XML 格式 的 。 使 用 XSL, 你 可 以 灵活 地 设置 文档 显示 的 样式 ， 
文档 将 自动 适应 任何 浏览 器 和 PDA( 掌 上 电脑 ) 。XSL 也 可 以 将 XML 转化 成 HTML 在 浏 
览 器 中 显示 。 

2) CSS 

CSS 是 目前 用 来 在 浏览 器 上 显示 XML 文档 的 主要 方法 。 

3) Behaviors 

Behaviors 现在 还 没有 成 为 标准 。 它 是 微软 的 IE 浏览 器 特有 的 功能 ,用 它 可 以 对 XML 
标记 设 定 一 些 有 趣 的 动作 。 

7. 允许 XML DOM 操作 

XML DOM 全 称 是 XML Document Object Model(XML 文档 对 象 模 型 ) ,DOM 是 用 来 
干什么 的 呢 ? 假设 把 XML 文档 看 成 一 个 单独 的 对 象 ,DOM 就 是 如 何 用 脚本 语言 对 这 个 对 
象 进行 操作 和 控制 的 标准 。XML 创建 了 标记 ,而 DOM 的 作用 就 是 告诉 Script 脚本 语言 如 
何在 浏览 窗口 中 操作 和 显示 这 些 标记 。 


5.1.3 XML 与 HTML 的 区 别 

1. 传统 的 HTML 存在 的 问题 和 不 足 

(1) HTML 的 标记 是 固定 的 ,有 70 多 个 。Web 技术 的 飞速 发 展 使 新 的 数据 格式 不 断 
产生 并 需要 在 网 上 展示 ,标准 的 HTML 语法 格式 无 法 创建 新 的 标记 ,也 将 无 法 支持 那些 专 
门 的 页 面 格式 ,例如 数学 公式 .化 学 方程 式 . 音 乐 乐 谱 、 财 务 报 表 以 及 工程 应 用 等 。 

(2) DHTML 带 来 的 问题 。 在 标准 HTML 无 法 满足 用 户 需 求情 况 下 ,人 们 在 其 基础 上 
增加 了 动态 的 成 分 ,如 脚本 程序 等 。 但 这 些 非 标准 技术 制作 的 网 页 在 不 同 的 浏览 器 之 间 互 
不 兼容 。 

(3) HTML 只 是 一 种 表现 技术 , 它 并 不 能 揭示 HTML 标记 所 标记 的 信息 的 任何 具体 
含义 。 例 如 ,语句 过 hl 之 Peach 王 /hl 之 是 表示 在 Web 浏览 器 中 用 标题 1 显示 文本 “Peach”， 
但 HTML 标记 却 没 有 表明 “Peach” 究 竞 代 表 什 么 意思 , 它 可 能 是 指 一 种 水 果 , 也 可 能 是 某 
公司 的 名 字 , 或 者 是 一 个 别 的 什么 东西 。HTML 当初 在 制定 时 并 没有 考虑 到 这 方面 的 
功能 。 

2. HTML 与 XML 的 对 比 

XML 技术 的 发 展 可 以 大 大 弥补 HTML 的 不 足 。 表 5-1 列 出 了 HTML 与 XML 的 


第 5 章 
对 比 。 
表 5-1 HTML 与 XML 对 比 
比较 内 容 HTML XML 
可 扩展 性 不 具有 扩展 性 可 用 于 定义 新 的 标记 语言 
侧重 点 侧重 于 如 何 表 现 信息 侧重 于 如 何 结 构 化 地 描述 信息 
语法 要 求 不 要 求 标 记 的 嵌 套 ` 配 对 等 ,不 要 
求 标记 之 间 具 有 一 定 的 顺序 严格 要 求 嵌 套 、 配 对 和 遵循 树 型 结构 
可 读 性 及 可 维护 性 ”难于 阅读 ,维护 结构 清晰 ,便于 阅读 和 维护 
数据 和 显示 的 关系 ”内 容 描述 与 显示 方式 整合 为 一 体 。 仅 为 内 容 描述 , 它 与 显示 方式 相 分 离 
保值 性 不 具有 保值 性 具有 保值 性 
编辑 及 浏览 工具 已 有 大 量 的 编辑 ,浏览 工具 ,例如 有 较 多 编辑 ,浏览 工具 。 例 如 Vervet Logic 
Frontpage、Dreamweaver 等 的 XML Pro V2、 微 软 的 免费 软件 XML 


Notepad 2.2、Altova 公司 的 XML Spy 等 


在 学 习 XML 技术 过 程 中 ,我 们 会 经 常 遇 到 很 多 技术 名 词 , 例 如 XML DTD、XML 
Schema 、XSL CSS 等 ,图 5-1 列 出 了 这 些 技术 相互 之 间 的 关系 。 


CSS 数据 库 
I 系统 
XMLDTD 上 ---- 1 
| XML 文档 
XML Schema 上 =- 一 下 XML 在 济 览 器 
1 ”| 中 显示 的 内 容 
1 
XSL 


图 5-1 XML 相关 技术 关系 图 


图 5-1 中 ,XML DTD 是 一 种 文本 说 明 内 容 , 既 可 以 放 在 一 个 单独 文档 中 ,又 可 以 直接 
放 在 某 个 XML 文档 中 ,用 以 说 明 XML 文档 中 数据 的 类 型 和 格式 。 不 过 由 于 XML DTD 
本 身 是 非 XML 文档 结构 的 ,其 对 XML 文档 数据 类 型 和 格式 的 描述 过 于 复杂 ,用 户 在 使 用 
时 较 难 掌握 ,目前 已 逐步 被 XML Schema 所 替代 。XML Schema 中 对 XML 文档 中 数据 类 
型 和 格式 的 描述 采用 了 XML 文档 结构 。CSS 和 XSL 分 别 用 以 说 明 XML 文档 在 浏览 器 中 
以 什么 方式 显示 其 中 的 数据 。 这 些 技术 将 会 在 后 续 章 节 中 一 一 介绍 。 


5.2 XML 文档 


5.2.1 XML 文档 的 有 关 术 语 

1. Element( 元 素 ) 和 Tag( 标 识 ) 

元 素 在 HTML 中 我 们 已 经 有 所 了 解 , 它 是 组 成 HTML 文档 的 最 小 单位 ,在 XML 中 也 
一 样 。 一 个 元 素 由 一 个 标识 来 定义 ,包括 开始 和 结束 标识 以 及 其 中 的 内 容 , 如 : 二 author 
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book 所 /author 之 。 唯 一 不 同 的 是 ,在 HTML 中 ,标识 是 固定 的 ,而 在 XML 中 ,标识 需要 你 
自己 来 创建 。 一 般 来 说 我 们 可 以 混淆 标识 与 元 素 的 区 别 。 

2. Attribute( 属 性 ) 

属性 是 对 标识 的 进一步 描述 和 说 明 , 一 个 标识 可 以 有 多 个 属性 。XML 元 素 可 以 像 
HTML 一 样 在 开始 标识 (start tag) 里 书写 属性 。 属 性 用 来 提供 关于 元 素 的 附加 信息 。 属 
性 常用 来 提供 数据 部 分 以 外 的 信息 。 如 : 


<file type = "gif"> computer. gif </file> 


如 上 代码 中 可 以 看 到 ,type 是 属性 ,computer. gif 是 数据 。type 属性 与 数据 并 不 相关 ， 
只 是 用 来 附加 说 明 该 元 素 用 了 gif 格式 的 数据 。 

3. Declaration( 声 明 ) 

每 个 XML 文档 的 第 一 行 都 有 一 个 XML 声明 一 ? xml version 二 "1.0"? 之 。 这 个 声明 
表示 这 个 文档 是 一 个 XML 文档 , 它 遵 循 的 是 哪个 XML 版 本 的 规范 。 

4. DTD(Document Type Definition ,文档 类 型 定义 ) 

DTD 是 用 来 定义 XML 文档 中 元 素 、 属 性 以 及 元 素 之 间 关 系 的 。 通 过 DTD 文档 可 以 
检测 XML 文档 的 结构 是 否 正确 。 但 建立 XML 文档 并 不 一 定 必须 要 DTD 文档 。 

5. Well-formed XML( 良 好 格式 的 XML) 

一 个 遵守 XML 语法 规则 ,并 遵守 XML 规范 的 文档 称 之 为 “良好 格式 ”。 如 果 所 有 的 标 
识 都 严格 遵守 XML 规范 ,那么 XML 文档 就 不 一 定 需要 DTD 文档 来 定义 它 。 

良好 格式 的 文档 必须 以 一 个 XML 声明 开始 ,如 : 二 ? xml version 一 "1. 0" standalone 一 
"yes" encoding 二 "UTF 一 8"? 之 。 其 中 必须 说 明文 档 遵循 的 XML 版 本 ,目前 是 1.0; 其 次 
说 明文 档 是 “独立 的 ”, 它 不 需要 DTD 文档 来 验证 其 中 的 标识 是 否 有 效 ; 最 后 要 说 明文 档 所 
使 用 的 语言 编码 ,默认 的 是 UTF-8。 

6. Valid XML( 有 效 的 XML) 

一 个 遵守 XML 语法 规则 ,并 遵守 相应 的 DTD 文档 规范 的 XML 文档 称 为 有 效 的 XML 
文档 。Well-formed XML 和 Valid XML 的 最 大 区 别 就 在 于 ,前 者 完全 遵循 XML 规范 ,后 
者 有 自己 的 文档 类 型 定义 (DTD) 。 


5.2.2 XML 文档 的 基本 结构 


XML 文档 是 一 个 纯 文 本 文件 ,可 以 用 任意 的 文本 编辑 器 编写 ,如 记事 本 、Word 等 。 为 
了 提高 编写 效率 ,也 有 一 些 专门 的 可 视 化 XML 创作 及 编辑 工具 ,例如 美国 Altova 公司 的 
XMLSpy 2006 企业 版 (http://www. xmlspy. com/)、Oxygen 公司 的 XML Editor (http: 
//www. oxygenxml. com/index. html) 等 ,用 户 可 从 网 上 下 载 这 些 工 具 。 

下 面 是 一 个 典型 的 XML 文档 。 


<?xml version = "1.0" encoding = "GB— 2312" standalone = "yes"?> 
<?xml — stylesheet type = "text/css" href = "book. css"?> 
< 中 国 古 典 名 著 > 
< 书 > 
< 书 名 > 三 国 演义 </ 书 名 > 
< 作者 > 罗贯中 </ 作 者 > 
< 内 容 简 介 > 略 …</ 内 容 简介 > 
</ 书 > 
< 书 > 
< 书 名 > 西游 记 </ 书 名 > 
< 作者 > 吴承恩 </ 作 者 > 
< 内 容 简介 > 略 …</ 内 容 简介 > 
</ 书 > 
</ 中 国 古典 名 著 > 


1. XML 文档 结构 由 3 个 部 分 组 成 
(1) XML 文档 声明 。 
它 位 于 文档 的 第 一 行 ,一 般 形式 为 : 


<?xml version = "versionNumber" [encoding = "Value"] [standalone = "yes/no"] ?> 


其 中 ,versionNumber 为 XML 文档 所 遵循 的 XML 规范 的 版 本 号 : 可 选项 encoding 表示 
XML 处 理 器 使 用 的 字符 集 , 默 认 值 为 UFT-8; 可 选 参数 standalone 取 值 为 yes 或 no, 默 认 
值 为 yes, 表 明 该 文档 是 一 个 独立 文档 。 

(2) 文档 显示 方式 或 文档 类 型 定义 等 的 声明 部 分 。 

文档 类 型 定义 (DTD) 部 分 ,一 般 形式 是 二 ! DOCTYPE…> ,如 不 需要 可 以 省 略 。 上 例 
中 第 2 行 说 明了 此 XML 文档 将 由 book. css 定义 的 样式 单 来 决定 其 显示 方式 。 

(3) XML 标识 的 文档 内 容 。 

2. XML 文档 内 容 的 结构 

1) 声明 根 元 素 

每 一 个 有 效 的 XML 文档 有 且 仅 有 一 个 根 元 素 。 根 元 素 是 在 一 个 XML 文档 中 包含 所 
有 其 他 元 素 的 元 素 ,无 论 是 在 语法 上 还 是 逻辑 上 , 根 元 素 位 于 所 有 数据 的 顶层。 根 元 素 的 声 
明和 其 他 元 素 的 声明 方法 一 样 , 一 般 形式 为 : 


< rootElementName >.…</rootElementName > 


rootElementName 是 根 元 素 的 名 称 , 必 须 成 对 出 现 , 且 区 分 大 小 写 。 根 元 素 在 逻辑 上 
代表 了 数据 的 顶层 , 它 必须 位 于 XML 声明 结束 后 的 下 面 一 行 。 

2) 声明 非 根 元 素 

在 XML 中 ,是 通过 在 容器 元 素 中 嵌 套 被 包含 元 素来 描述 数据 对 象 的 。 一 个 被 包含 元 
素 又 可 以 包含 自己 的 元 素 。 包 含 其 他 元 素 的 元 素 称 为 容器 ,所 有 的 非 根 元 素 都 包含 在 根 元 
素 中 , 根 元 素 是 最 上 层 的 容器 元 素 。 
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< containedElement [attributesList = ""]> 
< containedElement[attributesList = ""]> 
</containedElement > 


</containerElement > 


3) 数据 元 素 属 性 
一 个 数据 元 素 可 以 有 若干 属性 ,属性 必须 在 一 个 元 素 的 起 始 标记 中 声明 ,一 般 形 式 为 : 


<elenentName [属性 名 = "属性 值 "] [属性 名 = "属性 值 "] …> 
elementValue 
</elementName> 


其 中 ,元 素 名 和 属性 名 必须 以 字母 或 下 划 线 开始 ,并 且 只 能 包含 字母 .数字 、 下 划 线 、 连 字符 
和 句点 。 例 如 ,为 汽车 定义 的 3 个 属性 为 车 牌号 车主 和 制造 商 ,可 以 将 二 automobile 二 标记 
写 为 : 

< automobile number = "123456" owner = "Brion" manufacture= "Ford" > 

</automobile> 


由 于 其 中 二 automobile 二 标记 中 只 有 属性 描述 而 没有 元 素 值 ,所 以 可 以 缩写 成 : 


<automobile number = "123456" owner = "Brion" manufacture = "Ford" /> 


可 以 将 元 素 的 属性 名 转换 成 元 素 名 ,例如 上 例 中 的 转换 结果 是 : 


<automobile > 

< number > 123456 </number > 

< owner > Brion</owner > 

< manufacture> Ford </manufacture> 
</automobile> 


4) 定义 名 称 空间 

在 XML 中 ,用 户 可 以 自己 定义 标记 和 命名 元 素 。 因 此 ,如 果 把 多 个 XML 文件 合并 为 
一 个 ,就 很 可 能 出 现 冲 突 , 名 称 空间 就 是 为 此 设计 的 。 

XML namespaces 的 严格 定义 是 : namespaces 是 用 URI 加 以 区 别 的 ,在 XML 文件 的 
元 素 和 属性 中 出 现 的 所 有 名 称 的 集合 。URI 是 Uniform Resource Identifier( 通 用 资源 标志 
符 ) 的 缩写 。 在 没有 namespaces 的 XML 1.0 文 件 里 ,元 素 和 属性 中 出 现 的 名 称 被 称 为 “本 
地 名 称 ”(local names)。XML 名 称 空间 定义 的 一 般 形式 为 : 


< namespace:elementName xmlns:namespace = "globalUniqueURI"> 
< namespace:containedElement namespace:attributeName = "Vaue"> 
</namespace:containedElement > 

</namespace:elementName > 


其 中 ,namespace 是 名 称 空间 的 唯一 名 称 ,elementName 是 应 用 名 称 空间 的 XML 文档 元 素 
的 名 称 。globalUniqueURI 是 统一 资源 标识 符 , 可 根据 实际 情况 设 定 一 个 来 作为 名 称 空间 
的 URI。attributeName 和 attribute Value 是 和 容器 元 素 containedElement 相关 联 的 一 个 
属性 的 名 称 和 属性 值 。 

定义 名 称 空间 的 目的 是 唯一 地 标识 一 个 元 素 或 一 组 元 素 的 属性 。 例 如 : 


<r:customer xmlns:r = "http://www.RBCStore. com/CustomerURI"> 
<r:name r:Address = "Beijing"> Cherry </r:name> 
</r:customer> 


5) 包含 非 标 准 文本 

通过 预定 义 XML 实体 可 以 在 XML 文档 中 加 入 特殊 符号 。 如 果 需 要 大 量 的 特殊 符号 ， 
可 以 使 用 CDATA 段 ,CDATA 段 可 以 使 用 户 在 一 个 XML 文档 中 引用 大 量 的 特殊 符号 文 
本 块 。 一 般 形式 为 


<! [CDATA[ text] ]> 


其 中 ,text 是 包含 特殊 字符 的 文本 串 ,该 文本 不 被 XML 分 析 器 检查 。XML 处 理 器 负责 分 
析 或 者 以 一 种 有 意义 的 方式 使 用 该 文本 块 。 

【 例 5.1】 使 用 XML 格式 来 说 明 Jane 给 Brion 的 便条 信息 。ex_5_1. xml 的 文档 内 
容 为 : 


<?xml version = "1.0" encoding = "gb2312" ?> 
<note> 

<to> Brion </to> 

< from> Jane </from> 

< heading> Reminder </heading> 

< body> Don't forget me this weekend!</body> 

<! [CDATA[ This is an example of CDATA]]> 
</note> 


将 该 文档 存盘 后 ,双击 该 文档 将 其 在 浏览 器 中 以 树 型 方式 打开 ,如 图 5-2 所 示 。 


习 C\pocuments and settings\VAdministrator.WCLNOTE\ 至 面 \ERE [= Ed 


<?xml version="1.0" encoding="gb2312" ?> 
— <note> 

<to>Brion</to> 
<from>Jane</from> 
<heading>Reminder</heading> 
<body>Don” t forget me this weekend! </body> 
<![CDATA[ This is an example of CDATA ]]> 

</note> 


图 5-2 一 个 简单 的 XML 文档 在 浏览 器 中 的 显示 
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如 果 XML 文档 标记 不 配对 或 有 其 他 不 符合 XML 文档 格式 的 要 求 ,在 浏览 器 上 将 显示 
具体 的 出 错 信息 。 在 这 里 浏览 器 起 着 XML 文档 分 析 器 的 作用 。XML 分 析 器 有 确认 型 和 
非 确认 型 两 种 。 确 认 型 XML 文档 分 析 器 检查 XML 文档 的 语法 ,将 XML 文档 同文 档 类 型 
定义 DTD 或 模式 文件 作 比 较 , 还 要 判断 XML 数据 是 否 和 预定 义 的 确认 规则 相符 。 非 确认 
型 XML 分 析 器 也 进行 XML 文档 语法 的 检查 ,但 不 进行 XML 文档 和 DTD 及 模式 文件 的 
比较 。 在 微软 的 Internet Explorer 浏览 器 中 内 置 XML 确认 型 分 析 器 , 即 MSXML。 


5.3 用 CSS 在 浏览 器 中 控制 XML 文档 的 显示 


5.3.1 XML 文档 的 4 种 CSS 样式 定义 方式 


本 书 第 3 章 已 经 详细 介绍 了 在 HTML 文档 中 如 何 用 CSS 来 控制 其 页 面 显示 。 在 这 
里 ,控制 XML 文档 显示 的 样式 表格 式 是 和 HTML 中 的 样式 表格 式 相似 的 ,只 不 过 在 样式 
表 中 ,将 HTML 元 素 名 换 成 了 XML 元 素 名 。 下 面 简要 介绍 控制 XML 文档 显示 的 4 种 
CSS 样式 定义 方式 。 

1. 元 素 名 称 选 择 符 

可 同时 为 一 个 或 多 个 元 素 定义 样式 ,格式 如 下 : 

XML 元 素 名 称 { 设置 的 样式 规则 } 

例如 : 

Name, company, price, unit, details, .myclass, adderss#al 

{ Display:block; 

Font ~ weight :bold; 


Font - size:0. 8em 


2. 用 户 自 定义 类 选择 符 

通过 对 类 名 的 引用 ,不 同 的 元 素 可 使 用 同一 样式 ,不 同位 置 的 同一 元 素 可 使 用 不 同 的 类 
名 ,格式 如 下 : 

:类 名 称 { 设置 的 样式 规则 } 或 者 /* 可 以 被 XML 文 档 中 的 任何 元 素 使 用 */ 


XML 元 素 名 称 .类 名 称 { 设置 的 样式 规则 } ”/* 只 能 附加 到 指定 名 称 的 XML 元 素 上 */ 
/* 类 选择 符 定义 的 样式 表 应 用 到 zzz 元 素 的 方法 是 :<xNL 元 素 名 称 class = "类 名 称 ">* / 


3. 用 户 定义 的 ID 选择 符 

可 以 先 为 某 元 素 指定 一 个 ID 属性 ,再 在 CSS 样式 定义 中 通过 “元 素 名 #1D” 的 方式 指 
定 样式 。 注 意 : 元 素 名 和 ID 属性 前 面 的 # 之 间 不 能 有 空格 。 格 式 如 下 : 

#ID 号 { 设置 的 样式 规则 } 或 者 /x* 可 以 被 RE 文档 中 的 任何 元 素 使 用 * / 


XML 元 素 名 称 # 了 号 { 设置 的 样式 规则 } /* 只 能 附加 到 指定 名 称 的 XML 元 素 上 * / 
/x*ID 选择 符 定义 的 样式 表 应 用 到 Xz 元 素 的 方法 是 : <x2ML 元 素 名 称 id = "id 号 ">*/ 


4. 成 组 选择 符 
格式 如 下 : 


XML 元 素 名 称 1，XML 元 素 名 称 2，…，XML 元 素 名 称 n { 设置 的 样式 规则 } 

.类 名 称 1，. 类 名 称 2, …，. 类 名 称 n { 设置 的 样式 规则 } 

间 ID 号 1,#ID 号 2,…，#ID 号 n { 设置 的 样式 规则 } 

/* 通 过 成 组 选择 符 定义 样式 表 可 集中 定义 多 个 4 文档 元 素 的 相同 属性 ,减少 了 代码 编写 工作 
是。 ww/ 


5.3.2 CSS 样式 和 XML 文档 的 联系 方式 


有 3 种 方式 可 以 将 定义 的 CSS 样式 表 和 XML 文档 联系 起 来 。 
(1) 将 定义 的 CSS 样式 表 置 于 XML 文档 中 ,其 格式 为 : 


1 <?xml version = "1.0" encoding= "utf 一 8"?> 

2 <?xml - stylesheet type = "text/css"?> 

3 < 根 元 素 xmlns:HTML = "http://www. w3.org/1999/xhtml"> 
4 < HIML: STYLE > 

5 CSS 选择 符 1 { 设置 的 样式 规则 } … 

6 </HIML:STYLE> 

7 ”< 其 他 元 素 > … </ 其 他 元 素 > 

8 </ 根 元 素 > 


第 2 行 不 可 缺少 ,告诉 浏览 器 要 用 CSS 来 显示 XML 文档 。 第 3 行 在 根 元 素 中 定义 了 
一 个 HTML 名 称 空间 ,这 里 必须 是 HTML 名 称 空间 ,名 称 空间 的 URL 地 址 可 以 随意 , 即 
使 是 "abcd" 也 行 , 但 要 注意 它 的 唯一 性 。 在 XML 文档 中 插入 样式 单 的 style 标志 前 ,必须 
加 上 HTML 名 称 空间 。 

(2) 将 CSS 样式 表 放 在 单独 的 扩展 名 为 CSS 的 文件 中 ,然后 在 XML 文档 声明 部 分 通 
过 声明 语句 引用 CSS 文件 。 


<?xml version = "1.0" encoding = "UTF ~ 8"?> 
<?xml - stylesheet type = "text/css" href = "css 文件 " ?> 
< 根 元 素 > 
< 其 他 元 素 > … </ 其 他 元 素 > 
</ 根 元 素 > 


um ww 


(3) 将 上 面 两 种 方式 结合 起 来 : 既 在 XML 文档 中 定义 CSS 样式 ,又 引用 外 部 CSS 
文件 。 

第 3 章 已 经 介绍 过 CSS 样式 规则 ,为 便于 读者 的 学 习 , 下 面 列 出 了 XML 文档 常用 的 
CSS 样式 规则 ,如 表 5-2 所 示 。 有 很 多 辅助 工具 可 以 帮助 自动 生成 CSS 样式 。 
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表 5-2 XML 文档 常用 CSS 样式 规则 
属性 名 会 4 取 值 说 明 
block / none 以 块 显示 ,前 后 换行 / 不 显示 
pley Sm 和 前 、 后 的 元 素 在 一 行 中 显示 ( 阮 认 值 ) 
56% ,0. 5cm,0. 2in, 取 值 也 可 以 是 xx-small, x-small， 
font-size 字体 大 小 10pc,10pt small, xx-large, x-large, medium, 
lem,lex,1px large, smaller,larger 等 
font-style 字 型 italic/normal 斜体 /正常 字体 
normal 正常 粗细 
bold 粗 体 
Papi 人 更 粗 /更 细 
100,200,…,900 9 种 不 同 的 灰 度 
Red,green,blue 等 颜色 的 取 值 
color 前 景色 背 0<=a,b,c<=255 / 0%<=x,y, 
bcl elit 景色 rgb(a,b,c)/ rgb(x,y,z) z<=100% 
#0000FF 井 000000 一 井 FFFFFF 
background-image 背景 图 图 像 的 URL 
repeat 图 像 在 水 平和 垂直 两 个 方向 上 重复 
background-repeat 背景 图 重复 | repeat-x ; repeat-y 像 在 水 平 或 垂直 方向 上 重复 
no-repeat 图 像 不 垂直 
top 垂直 方向 的 顶端 
center 垂直 方向 的 中 央 
background-position | 背景 图 位 置 | bottom 垂直 方向 的 底 端 
left 垂直 方向 的 左 端 
right 垂直 方向 的 右 端 
letter-spacing 文字 间距 同 font-size 取 值 
text-align 文本 对 齐 left / center / right 左 对 齐 / 居中 对 齐 / 右 对 齐 
underline / overline 下 划 线 / 上 划 线 
| 中 刘 线 / 无 划 线 
margin 页 边 距 同 font-size 取 值 上 、 下 \ 左 、 右 页 边 距 
margin-top 上 边 距 同 font-size 取 值 也 用 作 有 段落 间距 和 左右 缩 进 
margin-bottom 下 边 距 
margin-left 左边 距 同 font-size 取 值 
margin-right 右边 距 
dotted, dashed ,solid, 
border-style 边框 线 样式 | double,groove,ridge， 边框 线 
inset,outset, none 
border-weight 边框 线 粗 同 font-size 取 值 
border-color 边框 线 颜 色 | 同 font-size 取 值 
text-indent 首 行 缩 进 同 font-size 取 值 
line-height 行距 同 font-size 取 值 


【 例 5.2】 


CSS 样式 表 置 于 XML 文档 中 示例 。 将 下 面 代码 保存 为 ex_5_2. xml。 
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<?xml version = "1.0" encoding = "UTF 一 8"?> 
<?xml — stylesheet type = "text/css"?> 
< paper xmlns:HTML = "http://www.w3.org/1999/xhtml"> 
<! -- 样式 单 定义 -> 
< HIML:STYLE> 
paper { Display:block;Font — size:20px;Line— height:160 % ;Text ~ align: 
center} 


author{ Display:block; Font — size:16px;Margin - top:5px;Margin - bottom:5px} 


Address{ Display:block; Font — size:16px; Text — align:center} 

abstract{ 

Display:block; Font— size:20px; Font — weight:bold; Font style:italic; 
LText - align: left} 

abstract#al{ 

Display:block; Font— size:14px; Font ~ weight:normal; Font_style: normal; 
Line— height:150% ;} 

keywords{ 

Display:block; Font - size:20px; Font — weight:bold; Font_ style: italic;} 
keywords#al 

{Display:block;Font - size:14px; Font - weight:normal;Font_style: normal; 
Line— height:150% ;} 

head{ Display:block;Font - size:20px; Line - height:150%} 


text{Display:block; Font - size:18px; text - align:left; text ~ indent:30pt; 


Line— height:150% ;} 

</HTML:STYLE > 

<title>E- learning 中 的 个 性 化 技术 研究 </title> 

< author > Hao Xingwei </author > 

<address > 
(Shandong University, School of Computer Science and Technology, Jinan, 
250100) 

</address> 

< abstract > Abstract: </abstract> 

<abstract ID = "al"> 


卫 - learning is now becoming a very important means in modern education, but the existing E— 
learning systems are short of pernonalization, the model of teaching is so simple that the 
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procedures of learning are almost the same. How to build a personalization learning 


circumstance，… 
</abstract> 
< keywords > Keywords:</keywords > 
<keywords ID= "al"> 
E— learning, Kowledge point, pernonalized service, Web discovery 
</keywords > 
< head>0. 前言 </head> 
<text> 


E-learning 是 指 基 于 网 络 的 .电子 化 ,数字 化 、 多 媒体 的 教学 方式 . 在 实际 应 用 中 ,E-learning 


的 范畴 非常 广泛 , 它 不 仅 包含 基于 互联 网 的 网 络 化 学 习 , 还 包括 了 基于 多 媒体 资料 的 数字 化 学 习 。 
随 着 Internet 的 快速 发 展 和 普及 ,以 及 教育 的 全 球 化 和 由 此 带 来 的 教育 竞争 的 加 剧 ,基于 Web 的 


E- learning 系统 已 经 成 为 许多 大 学 和 教育 机 构 实 施 现代 化 远程 教育 的 重要 手段 。 
</text> 
</paper> 
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在 浏览 器 中 运行 效果 如 图 5-3 所 示 。 


到 Ci\Inetpub\wwwroot\new_page_1.xml - Microsoft Internet Explorer 


<?xml version="1,0" encoding="UTF-8" ?> 
- <paper> 

<title>E-learning 中 的 个 性 化 技术 研究 </title> 

<author>Hao Xingwei</author> 

<address>(Shandong University,School of Computer Science and 
Technology ,Jinan,250100)</address> 

<abstract>Abstract:</abstract> 

<abstract ID="al">E-learning is now becoming a very important means in 
modern education, but the existing E-learning systems are short of 
pernonalization,the model of teaching is so simple that the procedures 
of learning are almost the same. How to build a personalization learning 
circumstance 一 </abstract> 

<keywords>Keywords:</keywords> 

<keywords ID="al">E-learning,Kowledge point,pernonalized service, Web 
discovery</keywords> 

<head>0. 前 言 </head> 

<text>E-learning 是 指 基于 网 络 的 、 电 子 化 、 数 字 化 、 多 媒体 的 教学 方式 。 在 实际 应 用 司 


Ei 
(a) 没有 CSS 样 式 定义 的 XML 文 档 


E-learning 中 的 个 性 化 技术 研究 
Hao Xingwei 


(Shandong University,School of Computer Science and Technology ,Jinan,250100) 


Abstract: 


E-learning is now becoming a very important means in modern education,but the existing E-learning systems are 
short of pernonalization the model of teaching is so simple that the procedures of learning are almost the same. 
How to build a personalization learning circumstance,.* 


Keywords: 
E-learning,Kowledge point,pernonalized service,Web discovery 
0. 前 言 
E-learning 是 指 基于 网 络 的 、 电 子 化 、 数 字 化 、 多 媒体 的 教学 方式 。 在 实际 应 
用 中 ，E-learning 的 范畴 非常 广泛 ， 它 不 仅 包 含 基于 互联 网 的 网 络 化 学 习 ， 还 包括 
了 基于 多 媒体 资料 的 数字 化 学 习 。 ee te tl 到 
| | [EE 


(b) 用 CSS 控 制 XML 文 档 的 输出 效果 
图 5-3 例 5.2 的 运行 效果 
【 例 5.3】 一 个 使 用 了 CSS 样式 表 的 XML 文档 。 样 式 文件 ex_5_3. css 内 容 如 下 : 
Student{ Display: block} 
Name. cl{ Font — size: 3em;color:red} 


Name. c2 Font - size:2em;color:green} 
Name. c3{ Font — size: lem;color:blue} 


引用 ex_5_3. css 样式 的 XML 文档 内 容 如 下 : 
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<?xml version = "1.0" encoding = "GB— 2312" ?> 
<?xml — stylesheet type = "text/css" href = "ex 5 3.css" ?> 
< student> 
< name class = "cl"> 张 三 </name> 
<name class = "c2"> 李 四 </name> 
< name class = "c3"> 王 五 </name> 
</student > 


运行 该 XML 文档 ,其 显示 效果 如 图 5-4 所 示 。 与 CinetpubwwwrootwicwSO 关 站 

【 例 5.4】 用 表格 来 显示 学 生花 名 册 , 其 中 有 两 个 学 
生 的 资料 。 从 例 中 可 以 知道 ,要 通过 CSS 用 表格 来 表示 六 一 
XML 文档 ,必须 使 用 HTML 名 称 空间 , 且 每 个 HTML 标 张 三 地 四 王 五 
记 前 必须 指定 HTML 名 称 空间 ,例如 “二 html: tr 这 … 
去 /html:tr 之 ”, 如 果 标 记 不 配对 , 则 要 用 /表示 结束 , 例 
如 “一 html:img src 一 "bg. jpg" alt="it's a background 
images"/ 二 ”。 在 指定 HTML 元 素 的 样式 时 ,必须 用 “html\:” 指 定名 称 空间 。ex_5_4. xml 
文档 内 容 如 下 : 


5-4 XML 使 用 CSS 


<?xml version = "1.0" encoding = "gb2312" ?> 
<?xml — stylesheet type = "text/css" href = "ex 5 4.css"?> 
< roster xmlns:html = "http://www. w3. org/1999/xhtm1"> 
< html :style type = "text/css"> 
html\ :caption {font - weight:bold; text - decoration:underline} /* 指定 表格 标 
题 的 样式 * / 
html\ :table {background - image: url("images/bg. jpg")} /* 指定 表格 的 背景 
图 片 */ 
.myclass {border - style:double;} 
#myid {border - style:groove;} 
</html :style> 
<html:table border = "1" cellPadding = "2"> 
< html:caption> 学 生花 名 册 </html:caption > 
< html:tr> 
< student > 
<html :td> < name > 李 华 </name> </html:td> 
<html:td> <origin id = "myid"> 河 北 </origin> </html:td> 
<html:td> <age>15 </age> </html:td> 
<html:td> < telephone> 62875555 </telephone > </html:td> 
</student > 
</html:tr> 
<html:tr> 
<student> 
<html:td><name> 张 三 </name> </html:td> 
<html:td><origin class = "myclass"> 北 京 </origin> </html:td> 
<html:td> <age>14</age> </html:td> 
<html:td> < telephone > 82873425 </telephone > </htnml:td> 
</student > 
</html:tr> 
</html:table> 
</roster > 
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ex_5_4. css 文件 内 容 如 下 : 


roster, student {font - size: 15pt; font - weight: bold; color: blue; display: block; margin 一 
bottom: 5pt;} 

origin, age, telephone {font - weight: bold; font - size: 12pt; display: block; color: block; 
margin— left: 20pt;} 

name {font - weight:bold;font — size:14pt;display:block;color:red;margin— top: 5pt; 

margin— left:8pt;} 


此 时 ,文件 ex_5_4. xml 在 下 下 的 浏览 效果 如 图 5-5 所 示 。 


| 李 华 | 大 耳 | 1s| 6287ssss 


到 
疾 阁 站 三 广 避 em 
图 5-5 使 用 CSS 将 XML 文档 按 表格 输出 


5.4 用 XSL 控制 XML 文档 在 浏览 器 中 的 显示 


5.4.1 XSL 概述 


可 扩展 样式 单 语言 XSL 是 eXtensible Stylesheet Language 的 缩写 , 它 是 由 W3C 组 织 
于 1999 年 11 月 年 制定 的 。XSL 自 提出 以 来 争议 颇 多 ,前 后 经 过 了 几 番 大 的 修改 。2007 年 
1 月 W3C 发 布 了 修改 后 的 XSLT 2. 0 版 本 (http://www. w3.org/TR/xslt20/)。 它 仍然 在 
进一步 修改 完善 中 。 

CSS 通过 创建 XML 元 素 的 样式 单 来 格式 化 XML 文档 ,并 且 将 其 显示 出 来 。 而 XSL 
采取 的 方式 更 加 引 人 注 目 , 它 将 XML 文档 转换 成 一 个 新 的 文档 (包括 HTML 文档 ) ,通过 
浏览 器 或 其 他 应 用 程序 就 可 以 显示 出 来 。 

XSL 本 身 也 是 遵循 XML 文档 格式 规范 的 一 种 标识 语言 , 它 提供 的 强大 功能 远 远 超过 
CSS, 如 将 元 素 再 排序 等 。 简 单 的 XML 文档 可 以 通过 CSS 来 转换 输出 ,然而 复杂 的 、 高 度 
结构 化 的 XML 文档 则 只 能 依赖 于 XSL 极 强 的 格式 化 能 力 展现 给 用 户 。 

XSL 和 CSS 之 间 的 异同 如 下 : 

(1) XSL 与 CSS 在 很 多 功能 上 是 重复 的 .但 是 它 比 CSS 功能 强大 。 不 过 XSL 的 强大 
功能 与 其 复杂 性 是 分 不 开 的 。 

(2) CSS 只 允许 格式 化 元 素 内 容 , 不 允许 改变 或 安排 这 些 内 容 。 但 XSL 没有 这 些 限 
制 , 它 可 以 提取 元 素 、 属 性 值 、 注 释文 本 等 几乎 所 有 的 文档 内 容 。 在 XML 领域 ,用 XSL 来 
格式 化 文档 是 未 来 发 展 的 方向 。 

(3) CSS 是 一 种 静态 的 样式 描述 格式 ,其 本 身 不 遵从 XML 的 语法 规范 。 而 XSL 不 同 ， 


它 是 通过 XML 进行 定义 的 ,遵守 XML 的 语法 规则 ,是 XML 的 一 种 具体 应 用 。 也 即 XSL 
本 身 就 是 一 个 XML 文档 ,系统 可 以 使 用 同一 个 XML 解释 器 对 XML 文档 及 其 相关 的 XSL 
文档 进行 解释 处 理 。 

XSL 由 两 个 关键 部 分 组 成 : 一 个 为 转换 引擎 ,将 原始 文档 树 ( 源 树 ) 转 换 为 能 够 显示 的 
文档 树 ( 结 果树 ) ,这 个 过 程 称 作 树 转换 ; 另 一 个 为 格式 化 符号 集 , 该 符号 集 可 以 定义 应 用 
XML 数据 上 的 复杂 的 格式 化 规则 ,这 个 过 程 称 作 格式 化 。 格 式 化 符号 集 又 称 为 格式 对 象 
(Formatted Object,FO) 。 

到 目前 为 止 ,W3C 还 未 能 出 台 一 个 得 到 多 方 认 可 的 FO, 但 是 描述 树 转换 的 这 一 部 分 协 
议 却 日 趋 成 熟 , 已 从 XSL 中 分 离 出 来 , 男 取 名 为 XSLT(XSL Transformations) ,正式 推荐 标 
准 于 2007 年 1 月 问世 ,现在 所 说 的 XSL 都 是 指 XSLT。 与 XSLT 一 同 推出 的 还 有 其 配套 
标准 XPath, 这 个 标准 用 来 描述 如 何 识别 、 选 择 、 匹 配 XML 文档 中 的 各 个 构成 元 件 , 包 括 元 
素 、 属 性 ,文字 内 容 等 。 

如 前 所 述 ,XSLT 主要 的 功能 就 是 转换 , 它 将 一 个 没有 形式 表现 的 XML 文档 作为 一 个 
源 树 ,将 其 转换 为 一 个 有 样式 信息 的 结果 树 。 在 XSLT 文档 中 定义 了 与 XML 文档 中 各 个 
逻辑 成 分 相 匹 配 的 模板 ,以 及 匹配 转换 方式 。 值 得 一 提 的 是 ,尽管 制定 XSLT 规范 的 初衷 
只 是 利用 它 来 进行 XML 文档 与 可 格式 化 对 象 之 间 的 转换 ,但 它 的 巨大 潜力 却 表现 在 它 可 
以 很 好 地 描述 XML 文档 向 任何 一 个 其 他 格式 的 文档 转换 
的 方法 ,例如 转换 为 男 一 个 逻辑 结构 的 XML 文档 、HTML 
文档 .PDF 文档 .XHTML 文档 、VRML 文档 .SVG 文档 等 。 
转换 过 程 如 图 5-6 所 示 。 XSLT | XSLT 处 理 器 

使 用 XSL 定义 XML 文档 显示 方式 的 基本 思想 是 : 通 5-6 XSLT 转换 过 程 
过 定义 转换 模板 ,将 XML 源 文档 转换 为 带 样式 信息 的 可 浏 
览 文档 。 最 终 的 可 浏览 文档 可 以 是 HTML 格式 、FO 格式 ,或 者 其 他 面向 显示 方式 描述 的 
XML 格式 (如 前 面 提 到 的 SVG 和 SMIL) ,限于 目前 浏览 器 的 支持 能 力 , 大 多 数 情况 下 是 转 
换 为 一 个 HTML 文档 进行 显示 。 

在 XML 中 声明 XSL 样式 单 的 方法 与 声明 CSS 的 方法 大 同 小 异 : 


XML 


<? xml — stylesheet type = "text/xsl" href = "xsl 文件 " ?> 


下 面 先 来 看 一 个 XSLT 的 简单 例子 。 通 过 剖析 这 个 例子 ,读者 可 以 掌握 一 些 XSLT 的 
基本 语法 和 功能 ,甚至 可 以 照 戎 芦 画 车 写 出 自己 的 XSLT 文档 。 
【 例 5.5】 下 面 是 描述 了 包括 3 张 CD 价目 表 的 XML 文件 ex_5_5. xml: 


<?xml version= "1.0" encoding = "iso— 8859—1" ?> 
<?xml - stylesheet type = "text/xsl" href = "ex 5 5.xsl"?> 
< CATALOG> 
<CD ID= "001"> 
< TITLE > Empire Burlesque </TITLE> 
< ARTIST > Bob Dylan </ARTIST > 
< COUNTRY > USA </COUNTRY > 
< COMPANY > Columbia </COMPANY > 
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<PRICE > 10.90 </PRICE> 
< YEAR> 1985 </YEAR> 

</CD> 

<CD ID = "002"> 
<TITLE > Hide your heart </TITLE> 
<RRTIST> Bonnie Tylor </RRTIST> 
< COUNTRY > UK</COUNTRY > 
< COMPANY > CBS Records </COMPANY > 
<PRICE> 9.90 </PRICE> 
< YEAR> 1988 </YEAR> 

</CD> 

<CD ID= "003"> 
<TITLE > Greatest Hits</TITLE > 
< ARTIST > Dolly Parton </ARTIST> 
< COUNTRY > USA </COUNTRY > 
< COMPANY > RCA </COMPANY > 
<PRICE> 9.90 </PRICE> 
< YEAR > 1982 </YEAR> 

</CD> 

</CATALOG> 


下 面 是 控制 价目 表 显 示 的 XSL 文档 ex_ 


. XS] : 


<?xml version = "1.0" encoding = "iso ~ 8859 一 1"?> 
<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/ 
Transform"> 
<xsl:template match = "/"> 
< html > 
<body> 
<table border = "2" bgcolor = "yellow"> 
<tr><th>Title</th><th>Rrtist</th></tr> 
<xsl:for - each select = "CATALOG/CD"> <! -- 对 XML 文档 树 中 根 元 素 下 的 CD 元 素 
循环 --> 
tr 
<td><xsl:value- of select = "TITLE"/></td> <! -- 提 取 TITLE 元 素 的 值 --> 
<td><xsl:value - of select = "ARTIST"/></td> <! -- 提取 ARTIST 元素 的 值 --> 
</tr> 
</xsl:for - each> 
</table> 
</body> 
</html > 
</xsl:template> 
</xsl:stylesheet > 


将 上 面 的 XML 文件 和 XSL 文件 放 在 一 个 目录 中 ,用 IE 打开 XML 文件 ,显示 结果 如 
图 5-7 所 示 。 


5.4.2 XSL 模板 元 素 


从 例 5.5 可 知 ,XSL 样式 文档 的 基本 结构 如 下 : 
(1) 以 下 面 的 指令 作为 文档 开头 (其 中 还 可 以 包含 其 他 属性 ,字符 集 也 有 许多 选项 ) 。 


<?xml] version = "1.0" encoding = "utf 一 8"> 


cInetpub\ wwwroot\ex_5_S.xml— Microe Ia] Ed| 


(2) 通过 “xsl: stylesheet xmlns: xsl” 来 声明 XSL 
名 称 空间 。 为 使 用 新 版 本 XSLT, 应 将 “http://www. 
w3. org/TR/WD-xsl” 名 称 空 间 换 成 “http://www. 
w3. org/1999/XSL/ Transform”。 特 别 注意 ,采用 不 同 
的 名 称 空间 在 浏览 器 中 显示 的 结果 可 能 会 不 一 样 。 

(3) 通过 “xsl: template” 定 义 模板 来 描述 XML 
文档 的 显示 格式 。 这 是 XSL 的 主要 部 分 。 

(4) 通过 XML 数据 的 引用 指明 显示 的 数据 。 图 5-7 使 用 XSL 显示 XML 文档 

(5) 其 中 包含 了 大 量 XHTML 语句 的 各 种 标记 ,标记 必须 配对 。 

(6) 通过 xsl:for-each xsl:if、xsl:choose 等 语句 进行 数据 的 循环 处 理 、 条 件 处 理 、 选 择 
处 理 等 工作 。 

(7) 可 以 嵌入 JavaScript 或 VBScript 脚本 语句 或 程序 ,使 XSL 具有 更 强大 的 运算 功能 。 

在 XSL 中 ,数据 的 显示 格式 被 设计 细 化 成 一 个 个 模板 ,最 后 再 将 这 些 模 板 组 合成 一 
完整 的 XSL。 这 种 方法 可 以 使 用 户 先 从 整体 上 考虑 整个 XSL 的 设计 ,然后 将 一 些 表现 形式 
细 化 成 不 同 的 模板 ,再 具 体 设计 这 些 模 板 , 最 后 将 它们 整合 在 一 起 。 这 样 ,宏观 与 微观 设计 

的 结合 ,更 符合 人 们 的 条 理化 ,规范 化 要 求 。 由 于 XML 的 数据 保存 在 具有 严格 层次 结构 的 

各 个 元 素 中 ,这 种 结构 非常 适合 采用 模板 化 的 格式 样式 。 图 5-8 为 用 模板 格式 化 XML 文档 
示意 图 。 


根 结 点 结 ! [一 一 直 浏览 器 中 显示 的 页 面 
六 守 页 面 内 容 1 
文 = 页面 内 容 2 
EE i 
= 页 面 中 其 他 内 容 


图 5-8 用 模板 格式 化 XML 文档 示意 图 


模板 定义 好 了 后 ,可 通过 call-template 或 apply-templates 来 调用 模板 ,其 过 程 就 如 同 
我 们 在 C 语言 中 定义 了 一 个 函数 ,就 可 在 程序 中 需要 的 地 方 进 行 函数 调用 。 

1. 定义 模板 的 语法 结构 

定义 模板 的 语法 结构 为 : 


<xsl:template match = "node — context" name = "template name"> … 
</xsl: template> 
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其 中 的 属性 含义 如 下 : 

(1) match 确定 什么 样 的 情况 下 执行 此 模板 ,也 即 源 XML 文档 中 哪些 结 点 应 该 被 相关 
的 模板 所 处 理 , 在 此 处 使 用 XML 文档 中 结 点 的 名 字 ; 其 中 最 上 层 的 模板 必须 将 match 设 
为 “/”。 在 一 个 XSL 文档 中 必须 有 一 个 根 模板 ,而 且 是 唯一 的 。 

(2) 二 xsl:template 记 元 素 用 match 属性 从 XML 文档 中 选取 满足 条 件 的 结 点 ,针对 这 
些 特 定 的 结 点 形成 一 个 特定 输出 形式 的 模板 。 在 一 个 XSL 文档 中 一 般 要 设计 多 个 模板 ,在 
各 个 模板 结构 中 描述 了 不 同 层次 元 素 的 数据 显示 格式 .数据 引用 数据 处 理 等 内 容 。 

(3) name 属性 即 是 为 定义 的 模板 取 一 个 用 户 自 定义 的 名 称 。 只 能 通过 去 xsl: call- 
template 盖 元 素来 调用 模板 。 

2. 通过 name 调用 模板 

通过 name 属性 调用 模板 的 语法 格式 如 下 : 


<xsl:call - template name = "template name"/> 


其 中 name 属性 代表 的 模板 名 称 和 模板 定义 的 名 称 相同 。 
3. 通过 select 调用 模板 
通过 select 属性 调用 模板 的 语法 格式 如 下 : 


<xsl:apply ~ templates select = "pattern"> 


其 中 select 属性 确定 应 调用 的 模板 , 即 选 取 用 二 xsl:template 二 标记 建立 的 模板 。 

对 于 设计 好 的 模板 ,是 通过 过 xsl:apply-templates 二 元 素 调用 的 ,这 样 ,即使 以 后 要 对 
这 些 模 板 做 相应 的 修改 与 扩充 也 很 方便 ,不 至 于 出 现 互相 和 干扰、 混杂 不 清 的 情况 。 这 种 从 上 
至 下 、 逐 层 细 化 的 设计 方法 , 极 大 地 减少 了 工作 复杂 程度 ,也 大 大 减少 了 差错 的 产生 ,可 以 实 
现 多 人 协作 设计 。 在 学 习 XSL 模板 时 ,为 便于 理解 ,可 将 定义 模板 看 成 定义 一 个 函数 ,调用 
模板 看 成 调用 函数 。 

【 例 5.6】 下 面 是 一 个 对 例 5. 5 中 CD 价目 表 的 XML 文件 采用 call 模板 处 理 的 例子 。 
第 3 一 9 行 定 义 了 一 个 根 模板 , 它 是 必需 的 。 第 10 一 17 行 定义 了 一 个 模板 ,模板 名 称 为 
"myTemplate" ,第 6 行 按 名 称 通过 二 xsl: call-template 二 标记 进行 模板 调用 。 这 种 方式 类 
似 于 函数 调用 。 最 终 在 浏览 器 中 输出 “CD 001: Empire Burlesque CD 002: Hide your heart 
CD 003: Greatest Hits”。ex_5_6. xsl 文件 内 容 如 下 : 


1 <?xml version = "1.0" encoding = "utf 一 8"?> 

2 <xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/ Transform"> 
3 <xsl:template match= "/"> <! -- 根 模板 是 必需 的 --> 

4 < HTML >< HEAD> <TITLE > 模板 的 调用 </TITLE></HERD> 

5 <BODY> 

6 <xsl:call - template name = "myTemplate"/> <! -- 调用 模板 --> 

加 </BODY> 

8 </HTML > 

9 </xsl:template> 


第 5 章 
10 <xsl:template name = "myTemplate" match = "CATALOG/CD" > 
11 <palign= "center" style= "font - weight:bold;"> 
12 <! -- 对 所 有 CD 循环 处 理 -- 一 > 
13 <xsl:for each select = "CATALOG /CD"> <! -CAIALOG /0D 大 小 写 要 和 XL 文档 中 一 致 --> 
14 CD<xsl:value- of select = "@ID"/>: <! -- 提取 CD 的 ID 属性 的 值 --> 
15 <xsl:value- of select= "TITLE"/> <! -- 提 取 每 个 CD 的 title--> 
16 </xsl:for ~- each> </p> 


17 </xsl:template> 
18 </xsl:stylesheet > 


【 例 5.7】 下 面 是 一 个 对 例 5. 5 中 CD 价目 表 的 XML 文档 采用 apply 模板 处 理 的 例 
子 。 第 10 一 17 行 定 义 了 一 个 模板 ,第 6 行 select 通过 二 xsl: apply-templates 二 标记 进行 模 
板 调 用 。 最 终 输 出 结果 和 例 5. 6 相同 。ex_5_7. xsl 文件 内 容 如 下 : 

1 <?xml version="1.0" encoding= "utf — 8"?> 


2 <xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/ Transform"> 
| <xsl:template match= "/"> 


4 < HTML >< HEAD >< TITLE > 模板 的 调用 </TITLE ></HEAD> 
<BODY> 

6 <xsl:apply — templates select = "CATALOG"/> 

W </BODY> 

8 </HTML > 


9 </xsl:template> 
10 <xsl:template match = "CRTRLOG"> 
11 <Pp align = "center" style = "font ~ weight:bold;"> 


2 < xsl:for- each select = ". /CD"> 

13 CD <xsl:value- of select = "@ID"/>: 
14 <xsl:value- of select = "TITLE" /> 
15 </xsl:for - each> 

16 </p> 


17 </xsl:template> 
18 </xsl:stylesheet > 


上 面 例子 中 ,只 用 了 一 个 根 模板 和 一 个 自 定 义 的 模板 ,可 根据 实际 情况 自 定义 多 个 模 
板 , 而 且 可 在 模板 中 再 定义 模板 。 此 过 程 如 同 函数 中 再 调用 函数 ,可 以 笛 套 很 多 层 。 
5.4.3 XSL 选择 元 素 和 测试 元 素 

XSL 选择 元 素 的 作用 是 : 用 选择 的 方式 将 数据 从 XML 文档 中 提取 出 来 。 这 是 一 种 在 
XSL 中 广泛 应 用 且 操 作 简单 的 获得 数据 的 方法 。XSL 测试 元 素 的 过 程 是 : 先 对 选择 的 对 
象 进行 测试 ,然后 对 符合 条 件 的 记录 进行 预定 的 处 理 。 

1. XSL 选择 元 素 

选择 元 素 有 两 种 不 同 的 方式 ,各 自 的 语法 格式 描述 如 下 。 


1) xsl:value-of 


语法 : <xsl:value - of select = "模式 "/> 
功能 : 该 语法 的 作用 是 从 XML 文档 中 提取 指定 结 点 的 数据 输出 到 结果 树 中 . select 属性 用 来 指定 XML 
文档 数据 结 点 名 称 。 
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2) xsl:for-each 


语法 : <xsl:for - each select = "模式 "> … </xsl:for -each> 
功能 : 循环 处 理 指定 结 点 的 相同 数据 .通过 select 属性 选择 xML 文档 中 的 某 些 元 素 进行 循环 处 理 。 


2. XSL 测试 元 素 
测试 语法 有 以 下 两 种 方式 ,各 自 的 语法 格式 描述 如 下 。 
1) xsl:if 


语法 : <xsl:if test = "测试 条 件 "> … 内 容 … </xsl:if> 
功能 : 测试 test 属性 给 定 的 条 件 , 当 条 件 的 值 为 True 时 执行 相关 内 容 , 否则 不 执行 。 


对 于 测试 条 件 ,情况 比较 复杂 。 测 试 条 件 可 以 为 一 个 关系 表达 式 或 逻辑 表达 式 ,其 书写 
规则 如 下 面 的 例子 所 示 : 


姓名 = 张 三 ” 表示 : 结 点 元 素 "姓名 "的 值 为 " 张 三 " 

成 绩 sgt; = 90 表示 : 结 点 元 素 "成 绩 "的 值 大 于 或 等 于 90 

成 绩 sgt; = 90 or 成 绩 St; 60] ”表示 : 结 点 元 素 "成 绩 "的 值 大 于 等 于 90 或 小 于 60 
CC 表示 : 当前 结 点 元 素 的 "性 别 "属性 值 为 " 女 "时 


2) xsl:choose 


语法 : <xsl:choose> 
<xsl:when test = "测试 条 件 "> … 内 容 … </xsl:when> 
<xsl:when test = "测试 条 件 "> … 内 容 … </xsl:when> 


<xsl:otherwise> … 内容 … </xsl:otherwise> 
</xsl:choose> 
功能 : 在 有 多 个 测试 条 件 的 情况 下 执行 满足 条 件 ( 由 test 指定 测试 条 件 ) 的 内 容 . 当 所 有 条 件 都 不 满 
足 时 执行 < xsl:otherwise> 指 定 的 内 容 。 


5.4.4 XSL 常用 运算 符 


XSL 中 的 运算 符 包括 选择 运算 符 和 特殊 字符 、 人 逻辑 运算 符 、 关 系 运 算 符 以 及 集合 运算 
符 , 这 些 运 算 符 构成 的 表达 式 可 以 使 用 在 测试 条 件 中 ,常用 的 运算 符 如 表 5-3 所 示 。 
表 5-3 常用 的 运算 符 


运算 符 含义 运算 符 会 ”并 
选择 子 元 素 , 返 回 左 侧 元 素 的 直接 子 | // 引用 任意 级 别 的 后 代 元 素 
1 元 素 ; 位 于 最 左 侧 的 /表示 选择 根 结 a 
点 的 直接 子 元 素 当前 元 素 
关 通配符 ,选择 任意 元 素 , 不 考虑 名 字 | @ 属性 名 的 前 级 
! * 在 相关 结 点 上 应 用 指定 方法 @* 通配符 ,选择 任意 属性 
Ox 分 组 ,明确 指定 优先 顺序 口 应 用 过 滤 样 式 


续 表 
运算 符 含义 运算 符 含义 
名 字 作用 范围 分 隔 符 ,将 名 字 作 用 范 en Rs 
围 前 级 与 元 素 或 属性 名 分 隔 开 来 口 下 标 运算 符 ,在 集合 中 指示 元 素 
| 合 运算 符 ,返回 两 个 集合 的 联合 | or 逻辑 或 
> 大 于 。 在 XSL 中 ,要 用 &gt; 表示 | and 逻辑 与 
a 大 于 等 于 。 在 XSL 中 ,要 用 &gt; 一 i 逻辑 非 
表示 
< 小 于 。 在 XSL 中 ,要 用 &lt; 表示 “| = 相等 
= 小 于 等 于 。 在 XSL 中 ,要 用 &lt; = a 不 等 
表示 
mod 取 模 十 ,一 ,* ,div| 加 减 乘除 


【 例 5.8】 该 例 针对 存放 简历 的 XML 文档 ex_5_8. xml, 在 ex_5_8. xsl 中 采用 了 几 种 
不 同 的 运算 符 。 在 应 用 时 ,只 需要 将 ex_5_8. xsl 文档 中 的 第 8 行进 行 替换 。ex_5_8. xsl 中 
第 13 行 演示 了 如 何 直 接 提取 birthday 的 值 。 读 者 可 仿照 此 例 举一反三 地 练习 。 


(1) < xsl:for - each select =" * /resume"> 
说 明 : 此 处 用 通配符 * 代替 了 document 元 素 名 称 . 对 每 个 resume 循环 处 理 . 
(2) < xsl:for - each select = "/document/resume [grade &lt; 60]"> 
说 明 : [ ] 表 示 选 择 条 件 , 仅 循环 处 理 成 绩 < 60 分 的 学 生 
(3) < xsl:for - each select = "//resume [@id= '008']"> 
说 明 : 对 简历 中 Id 属性 编号 为 "008" 的 人 进行 处 理 
(4) <xsl:for - each select = " * /resume [cellphone]"> 
说 明 : 对 简历 中 具有 "cellphone" 元 素 的 人 进行 处 理 , 也 即 对 简历 中 提供 了 手机 号 码 的 人 进行 
处 理 . 
(5) < xsl:for - each select =" * /resume [skill = 'Web 开发 ']"> 
说 明 : 对 简历 中 具有 "Web 开发 "技能 的 所 有 人 进行 处 理 


ex_5_8. xml 文档 代码 如 下 : 


<?xml version = "1.0" encoding = "gb2312" ?> 
<?xml - stylesheet type = "text/xsl" href = "ex_5_8.xsl"?> 
< document > 
< resume id= "007"> 
< name > 李 敏 </name> 
< sex> 男 </sex> 
<birthday> 1971 - 12 - 30 </birthday> 
< skil1> Web 开发 </skil1> 
< skill > 游戏 编程 </skill > 
<cellphone> 13983911111 </cellphone> 
<grade>50</grade> 
</resume> 
<resume id= "008"> 
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<name> 王 甜 珠 </name > 
<sex> 女 </sex> 
<birthday > 1981 - 01 - 30 </birthday > 
< skill > 舞蹈 </skill > 
<grade> 80 </grade> 
</resume> 
</document > 


ex_5_8. xsl 文档 代码 如 下 : 


1 <?xml version = "1.0”encoding = "gb2312"?> 
2 <xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/ Transform"> 
3 <xsl:template match= "/"> 


4 <HTML >< HEAD>< TITLE > XML 技术 </TITLE ></HERD > 

L < BODY BGCOLOR = "#00CC66"> 

6 < TABLE border = "1" cellspacing = "0"> 

<TH> 姓 名 </TH>< TH> 性 别 </TH> 

8 <xsl:for - each select = "/document/resume [grade &lt; 60]"> 
9 < IIR><TD><xsl:value- of select = "name"/></TD> 

10 <TD><xsl:value- of select = "sex"/> </TD> 

11 </TR> 

12 </xsl:for - each> 

13 </TABLE> 第 个 人 的 生日 是 <xsl:value -of select ="/*/*/birthday"/> 
14 </BODY> 


15 </HTML> 
16 </xsl:template> 
17 </xsl:stylesheet > 


5.4.5 XSL 内 置 函数 


XSL 提供 了 100 多 个 内 置 函数 ,这 些 函 数 大 大 方便 了 开发 者 的 使 用 ,例如 用 current() 
可 获得 当前 结 点 ,用 current-date() current-time() 分 别 来 返回 当前 日 期 和 时 间 。 可 参阅 
http://www. w3schools. com/xpath/xpath_functions. asp 获取 所 有 内 置 函 数列 表 。 这 里 
主要 介绍 几 个 常用 的 XSLT 内 置 函 数 。 

1. position() 函 数 ,last() 函 数 

作用 : 分 别 表示 确定 当前 和 最 后 一 个 结 点 元 素 的 位 置 。 


举例 : <xsl:if test = "position()! = last()"> 
说 明 : 判断 当前 结 点 元 素 是 否 为 最 后 一 个 。 


2. count() 函 数 


作用 : 统计 计数 ,返回 符合 条 件 的 结 点 的 个 数 。 
举例 : <p>< xsl:value - of select = "count(PERSON[name = tom])"/></p> 
说 明 : 显示 PERSON 元 素 中 姓名 属性 值 为 tom 的 有 几 个 。 


3. number() 函 数 


作用 : 将 属性 值 中 的 文本 转换 为 数值 。 
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举例 : <p> The number is: <xsl:value- of select = "number(book/price)"/></p> 


说 明 : 显示 书 的 价格 。 
4. substring() 


语法 : substring(value, start, length) 

作用 : 截取 字符 串 。 

举例 : <p><xsl:value- of select = "substring(name，1，3)"/></p> 
说 明 : 截取 name 元 素 的 值 , 从 第 一 个 字母 开始 直到 第 三 个 。 


5. string-length(string) 函数 


语法 : string - length(string) 

作用 : 获取 字符 串 的 长 度 。 

举例 : <p>< xsl:value- of select = "string- length(name)"/></p> 
说 明 : 获取 name 元 素 的 字符 串 长 度 值 。 


6. concat() 和 string-join() 串 连接 函数 


语法 : concat(string, string, .…) 或 者 string- join( (string, string, …)vsep) 
作用 : 将 多 个 字符 串 连接 在 一 起 。 后 者 在 连接 子 串 时 可 带 分 割 符号 。 
举例 : concat('XPath ', 'is ', 'FUN! ') 
string - join(('We'，'are'，'having'，'fun! '),' ') 用 空格 连接 字 串 
说 明 : 前 者 返回 'XPath is FUN! ', 后 者 返回 "We are having fun! ， 


7. sum() .max() .min() .avg() 函 数 


作用 : 分 别 表示 求 和 , 求 最 大 值 , 求 最 小 值 , 求 平均 值 。 
举例 : <p>Total Price = <xsl:value- of select = "sum(//price)"/></p> 
说 明 : 计算 所 有 价格 的 和 。 其 中 // 表 示 引 用 任意 级 别 的 后 代 元 素 。 


5.4.6 XSL 中 的 其 他 常用 元 素 


XSL 中 除了 前 面 讨论 的 元 素 外 还 提供 了 一 些 其 他 处 理 元 素 。 表 5-4 列 出 了 几 个 常用 的 


XSL 处 理 元 素 。 为 了 方便 读者 理解 和 掌握 使 用 这 些 元 素 ,请 阅读 例 5. 9 。 
表 5-4 XSL 常用 其 他 处 理 元 素 
xsl 元 素 说 明 及 例子 


xsl:comment | 向 结果 树 中 写 人 一 个 注释 ,例如 二 xsl:comment 之 这 是 一 个 例子 一 /xsl:comment> 


xsl:copy 将 源 文档 中 的 当前 结 点 复制 到 结果 树 中 ,当前 结 点 的 子 结 点 不 复制 


215 


216 | 


开发 技术 (第 2 版 ) 


续 表 


xsl 元 素 说 明 及 例子 

指定 在 结果 树 中 创建 什么 类 型 的 格式 。 例 如 二 xsl: output method 一 "text”indent 一 
xsl:output "yes"/ 沁 指定 生成 一 个 文本 型 结果 文档 ,该 元 素 应 放 在 根 模板 前 。method 可 以 取 值 为 
xml、html 和 text。indent 指定 生成 的 结果 文档 是 否 要 缩 进 

与 xsl:foreach 或 者 xsl: apply-templates 一 起 使 用 ,为 选 定 的 结 点 列表 排序 。 例 如 


xsl:sort 所 xsl:sort order 一 "descending”select 二 "TITLE"/ 放 中 ,order 有 升序 (ascending) 和 降 
序 (descending) 选 项 ; select 属性 指定 要 排序 的 结 点 元 素 
xsl:text 输出 指定 文本 到 结果 树 中 。 例 如 二 xsl:text> 我 输出 来 了 一 /xsl:text> 


xsl :variable 用 来 声明 和 分 配 局 部 或 者 全 局 变量 
xsl :element 在 结果 树 中 以 指定 的 名 称 创 建 一 个 元 素 
xsl:attribute | 为 结果 树 中 的 某 元 素 创建 一 个 属性 ,已 有 同名 属性 则 被 它 蔡 换 


【 例 5.9】 下 面 是 一 个 对 例 5.5 中 CD 价目 表 的 XML 文档 采用 相关 XSL 元 素 处 理 的 
例子 。 第 7 行 表 示 了 一 个 注释 ; 第 11 行 表示 按 CD 的 title 降序 排序 ; 第 14 行 用 于 向 结果 
树 中 输出 文本 ; 第 24、25 行 演示 了 如 何 定义 变量 和 访问 变量 ; 第 27 一 30 行 演示 了 如 何在 结 
果树 中 定义 新 元 素 和 属性 (这 里 动态 创建 了 HTML 的 img 元 素 ); 第 31、32 行 演示 了 sum 
函数 和 substring 函数 的 使 用 。 最 终 浏览 器 效果 如 图 5-9 所 示 。ex_5_9. xsl 文件 内 容 如 下 : 


1 <?xml version = "1.0" encoding = "utf 一 8"?> 

2 <xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSLV Transform"> 
3 <xsl:output method = "html" indent = "yes"/> 

4 <xsl:template match = "/"> 

5 < html >< head><title>XSL 其 他 元 素 应 用 示例 </title></head> 

6 <body> 

<xsl:comment > 这 是 一 个 例子 </xsl:comment > <! -- 注释 --> 

8 <h2>My CD Collection </h2> 

9 <p> Titles: 

10 <xsl:for - each select = "CATALOG/CD"> 

11 <xsl:sort order = "descending" select = "TITLE"/> 

2 <xsl:value- of select= "TITLE"/> 

13 <xsl:if test= "position()! = last()"> 

14 < xsl:text >, </xsl:text > 

5 </xsl:if> 

16 <xsl:if test = "position() = last() -1"> 

17 <xsl:text > and </xsl:text > 

18 </xsl:if> 

19 <xsl:if test = "position() = last()"> 

20 <xsl:text >!</xsl:text > 

21 </xsl:if> 

22 </xsl:for- each> 

23 

24 < xsl:variable name = "myStr"> Im OK!</xsl:variable> <! -- 创建 了 一 个 变量 myStr --> 
25 <xsl:value- of select="$myStr"/> <! -- 输 出 变量 mystr 的 值 --> 
26 


27 <xsl:element name = "img"> <! -- 创建 了 一 个 HTML 的 img 元 素 --> 
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28 ”<! -- img 元 素 的 src 属性 --> 
<xsl:attribute name = "src"> mmc. gif </xsl:attribute> 
29 ”<! -- img 元 素 的 alt 属性 --> 
<xsl:attribute name = "alt"> This is a picture </xsl:attribute> 
30 </xsl:element> 
31 <p> Total Price = <xsl:value — of select = "sum(CATALOG/CD/PRICE)"/> 
</p> 
32 <p><xsl:value — of select = "substring(CATALOG/CD/TITLE, 1, 3)"/> 
</p> 
33 </p></body> 


34 </html > </xsl:template> 
35 </xsl:stylesheet > 


蚤 xSL 其 他 元 素 应 用 示例 - Microsoft Internet Explorer L=|Dj xl 
| 文件 日。 编辑 (查看 (W) 收藏 (a) 工具 (D 帮助 | 链接 ”| 


My CD Collection 


Tales Hide your heart, Greatest Hits, and Empire Budesauelrm OK IY 


Total Pnce= 30.700000000000003 


Emp 国 
贡 寺 [|「 凡 HW :2 


5-9 浏览 器 显示 效果 


5.4.7 XSL 应 用 实例 


XSL 语言 包含 的 内 容 非常 丰富 ,很 难 在 一 个 章节 中 覆盖 所 有 细节 。 我 们 在 数据 库 中 ， 
可 通过 SQL 语言 编程 对 数据 进行 各 种 操作 ,从 而 实现 数据 的 查询 、 修 改 或 更 新 。 在 学 习 
XSLT 技术 时 也 可 以 这 样 来 理解 XSL 的 应 用 ,就 是 将 XML 源 文档 看 成 是 数据 库 中 的 数据 
表 , 将 XSL 语言 看 成 针对 数据 库 操 作 的 SQL 语言 ,可 以 用 XSL 语言 对 XML 源 文档 进行 查 
询 修改 或 更 新 操作 ,最 后 将 处 理 的 结果 在 浏览 器 中 显示 出 来 。 下 面 的 几 个 例子 可 以 满足 读 
者 入 门 之 需要 。 

【 例 5.10】 下 面 是 一 个 对 例 5. 5 中 价目 表 的 XML 文档 采用 xsl:if 控制 的 XSL 文件 


ax. 5 10, xal, 


<?xml version = "1.0"?> 
<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/ 
Transform"> 
<xsl:template match = "/"> 
< html > 
<body> 
<table border = "2" bgcolor = "yellow"> 
<tr><th>Title</th><th> Artist </th></tr> 
<xsl:for - each select = "CATALOG/CD"> 
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<xsl:if test = "ARTIST = 'Bob DYlan'"> 
tr 
<td><xsl:value— of select = "TITLE"/></td> 
<td><xsl:value — of select = "ARTIST"/></td> 
</tr> 
</xsl:if > 
</xsl:for - each> 
</table> 
</body> 
</htm] > 
</xsl:template> 
</xsl:stylesheet > 


将 上 面 的 XSL 文件 和 XML 文件 放 在 一 个 目录 中 ,用 IE 打开 XML 文件 ,显示 效果 如 
图 5-10 所 示 。 


[Empire Burlesque Bob Dylan 
EL 


5-10 采用 xsl:if 的 XSL 文件 显示 效果 


【 例 5.11】 下 面 是 一 个 对 例 5. 5 中 价目 表 的 XML 文档 采用 xsl: choose 控制 的 XSL 
文件 ex_5_11. xsl, 其 内 容 为 ; 


<?xml version= "1.0"?> 
<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/ 
Transform"> 
<xsl:template match = "/"> 
< html > 
<body> 
<table border = "2" bgcolor = "Yellow"> 
<tr><th>Title</th><th>Rrtist</th></tr> 
<xsl:for - each select = "CATALOG/CD"> 
半 证 所 
<td><xsl:value- of select = "TITLE"/></td> 
<xsl:choose> 
<xsl:when test = "ARTIST = 'Bob Dylan'"> 
<td bgcolor = "#ff0000"> 
<xsl:value — of select = "ARTIST"/> 
</td> 
</xsl:when> 
<xsl:otherwise> 
<td><xsl:value ~ of select = "ARTIST"/> </td> 


219 


</xsl:otherwise> 
</xsl:choose> 
</tr> 
</xsl:for - each> 
</table> 
</body> 
</html > 

</xsl:template> 
</xsl:stylesheet > 


将 XML 文档 和 上 面 的 XSL 文件 放 在 一 个 目录 中 ,用 IE 打开 XML 文件 ,显示 效果 如 
图 5-11 所 示 。 


对 Cc\examples\en_5 11.xml- Microso [I=] 


| 文件 (E) ”编辑 (E) ”查看 (WW) 收 斋 ) 到 
Meiko) [ed ci\exampleslex_ 5_11.xm 加 


Tite Artist 
[Empire Burles que NEE 


IHide your heart [Bonnie Tylor 
(Greatest Hits &é [Dolly Parton 


一 
[SE 
5-11 采用 xsl:choose 的 XSL 显示 效果 


图 5-12 采用 模板 的 XSL 显示 效果 


【 例 5.12】 下 面 是 一 个 XSL 控制 XML 文档 显示 的 例子 ( 见 图 5-12)。 将 该 例 和 例 5. 4 
中 采用 CSS 方式 格 式 化 XML 文档 的 方式 相 比 ,可 知 用 XSL 要 灵活 方便 得 多 。ex_5_12. xml 


文档 内 容 如 下 : 


<?xml version= "1.0" encoding = "gb2312"?> 
<?xml - stylesheet type = "text/xsl" href = "ex 5 12.xsl"?> 
<roster> 
< student > 
< name > 李 华 </name> 
<origin> 河 北 </origin> 
<age>15</age> 
< telephone > 62875555 </telephone > 
</student > 
< student > 
<name> 张 三 </name> 
<origin> 北 京 </origin> 
<age>14</age> 
< telephone > 82873425 </telephone > 
</student > 
</roster > 


对 应 的 ex_5_12. xsl 文件 内 容 如 下 : 
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1 <?xml version = "1.0" encoding= "gb2312"?> 
2 <xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"> 
3 <xsl:template match= "/"> 
4 <HIML> 
2 < HEAD>< TITLE > 学 生花 名 册 </TITLE> 
6 <STYLE > 
7 .title{font — size:15pt; font- weight:bold; color:blue } 
8 .name{color:red} 
9 table {background — image: url("images/bg. jpg")} 
10 </STYLE> 
11 </HEAD> 
2 <BODY> 
15 <P class = "title" > 学 生花 名 册 </P> 
14 <xsl:apply - templates select = "roster"/> 
15 </BODY> 


16 </HTML> 
17 </xsl:template> 


19 <xsl:template match = "roster"> 
20 < TABLE BORDER = "1"> 


21 < THEAD> 

和 <TD><B> 姓 名 </B></TD> 

23 <TD><B> 籍 贯 </B></TD> 

24 <TD><B> 年 龄 </B></TD> 

25 <TD><B> 电 话 </B></TD> 

26 </THEAD> 

27 <xsl:for - each select = " student"> 

28 <xsl:sort order = "ascending" select = "name"/> 

29 <TR> 

30 <TD><B><xsl:value- of select = "name"/></B> </TD> 
= <TD> <xsl:value— of select= "origin"/> </TD> 
32 <TD> <xsl:value— of select= "age"/> </TD> 
33 <TD> <xsl:value— of select = "telephone"/></TD> 
34 </TR> 

35 </xsl:for - each> 


36 </TABLE > 
37 </xsl:template> 
38 </xsl:stylesheet > 


5.5 XML 数据 岛 及 其 应 用 


所 谓 XML 数据 岛 就 是 在 HTML 页 面 文档 采用 HTML 中 的 专门 标记 “XML 
二 /XML 放 ”定义 的 一 块 数据 。 可 用 HTML 标记 的 属性 datasrc 指定 XML 数据 岛 的 ID, 用 
datafld 属性 绑 定 XML 数据 源 中 的 结 点 元 素 名 称 来 获取 数据 。 

XML 数据 岛 在 HTML 页 面 中 使 用 有 两 种 方式 . 即 内 嵌 式 和 连接 式 。 内 嵌 式 就 是 直接 
将 XML 文档 的 片段 数据 插入 到 HTML 页 面 的 “二 XML 之 ”和 “天 /XML ”之 间 , 语 法 形式 
如 下 : 
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<XML id= "数据 岛 ID"> 元 素 列表 </XWL> 


而 连接 式 则 是 将 整个 外 部 的 XML 文档 链接 到 HTML 页 面 中 ,其 请 法 形式 如 下 : 


<XML ID = "数据 岛 ID” SRC = "XML 文档 URI"> </XML> 


XML 数据 岛 的 应 用 更 多 的 是 与 XML DOM 结合 使 用 ,读者 可 在 学 完 DOM 部 分 后 强 
化 这 方面 的 应 用 。 下 面 举 两 个 简单 的 例子 来 说 明 XML 数据 岛 在 HTML 中 的 应 用 。 
【 例 5.13】 XML 数据 岛 在 HTML 中 的 应 用 示例 一 。XML 文档 ex_5_13. xml 的 内 容 如 下 : 


<?xml version = "1.0" encoding = "utf - 8" standalone = "no"?> 
< studentList > 
< stu> 
< sid> 200202051001 </sid> 
<name> 黎 ” 佳 </name> 
<gender > 男 </gender > 
<cName> 02 级 财务 (1) 班 </cName > 
</stu> 
<stu> 
< sid> 200202051002 </sid> 
< name> 软 ” 娟 </nane> 
< gender > 女 </gender > 
<cName> 02 级 财务 (1) 班 </cName > 
</stu> 
<stu> 
< sid> 200202051003 </sid> 
<name> 韦 威 </name> 
< gender > 男 </gender > 
<cName> 02 级 财务 (1) 班 </cName> 
</stu> 
</studentList> 


引用 该 XML 文档 的 HTML 文件 ex_5_13. htm 的 代码 如 下 : 


<html >< head ><title> XML 数据 岛 在 HTML 中 的 应 用 </title> </head> 
<body style= "background - color: #fffff0"> 
<xml id= "xmldata" src= "ex 5_13.xml"></xml> 


< h2 > 财务 管理 专业 学 生 名 单 </h2 > 
<table datasrc = "#xmldata" style= "border ~ style: inset;border - color:Red" 
border = "1"> 
<thead><th> 学 号 </th>< th> 姓 名 </th>< th> 性 别 </th> <th> 班 级 </th> </thead> 
和 EP 


<td>< span datafld= "sid"></span ></td> 
<td>< span datafld = "name"></span></td> 
<td>< span datafld = "gender"></span></td> 
<td>< span datafld = "cName"></span></td> 
</tr> 
</table> 
</body></html > 
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运行 后 的 效果 如 图 5-13 所 示 。 


本 xMmL 数 括 岛 在 HTML 中 的 应 用 - Microsoft InEENEEEE 阿 站 | 
上 」 文件 (E) 蝙 回 (E) ”查看 (V) 收 羡 (A) 工具 (TD) 和 有 


财务 管理 专业 学 生 名 单 


学 号 姓名 上 性 别 | ”班级 
200202051001 蒜 人 年 而 “1 级 财 夯 G 班 
区 


x 


200202051002 辟 于 02 缀 财务 (1) 班 
200202051003 唐 威 | 田 ”|02 级 财务 (1) 班 痢 
ED [[ 广 各 吏 师 4 


5-13 XML 数据 岛 在 HTML 页 面 的 简单 应 用 
【 例 5.14】 XML 数据 岛 在 HTML 中 的 应 用 示例 二 。 


<HTML>< HEAD >< Title> HTML 中 的 数据 岛 中 的 记录 集 </Title></HEAD> 
< body bgcolor = " #00FFFF"> 
<font color =" 间 F0000"><b> HTML 中 的 XML 数据 岛 记录 编辑 与 添加 </b></font > 
<HR> 酒 店名 称 : < input type = "text" datasrc ="#islet" DataFLD = "NAME">< BR> 
地 址 : < input type = "text" datasrc = "#islet" DataFLD= "Rddress">< BR> 
主页 : < input type = "text" datasrc = "#islet" DataFLD = "HomePage">< BR> 
电子 邮件 : < input type = "text" datasrc="#islet" DataFLD = "E-Mail"><BR> 
电话 : < input type = "text" datasrc ="#islet" DataFLD = "TelePhone"><BR> 
级 别 : < input type = "text" datasrc = "#islet" DataFLD = "Grade"><HR> 
< input id = "first" type = "button" value = " 首 条 " onclick = "islet. recordset. 
moveFirst()"> 
< input id = "prev" type = "button" value =" 上 条 " onclick = "islet. recordset. 
movePrevious()"> 
< input id = "next" type = "button" value = "下 条 " onclick = "islet. recordset. 
moveNext()"> 
< input id= "last" type = "button" value = " 末 条 " onclick = "islet. recordset. 
moveLast()"> 
< input id = "Add" type = "button" value = "添加 "onclick = "islet. recordset. 
addNew( ) "> 
<XML ID= "islet"> 
<HotelList> 
<Hotel > 
< Name > 四 海 大 酒店 </Name > 
<Address > 海 魂 路 号 </hddress> 
< HomePage > www. sihaihotel. com. cn </HomePage> 
<E- Mail > master@ sihaihotel. com. cn</E- Mail > 
<Telephone>(0989)8888888 </TelePhone> 
< Grade> 五 星 级 </Grade> 
</Hotel> 
<Hotel > 
<Name> 五 湖 宾馆 </Name> 
< Rddress > 东平 路 号 </Address> 
< HomePage > www. wuhu. com. cn </HomePage > 


<E- Mail > web@wuhu. com. cn </E— Mail > 
<Telephone>(0979)1111666 </TelePhone > 
<Grade > 四 星 级 </Grade > 
</Hotel> 
<Hotel> 
< Name >" 大 沙漠 "宾馆 </Name> 
< Address > 留 香 路 号 </Address> 
< HomePage > www. dashamohotel. com. cn </HomePage > 
<E- Mail > master@dashamohotel. com. cn </E— Mail> 
< TelePhone >(0989)87878788 </TelePhone > 
<Grade > 五 星 级 </Grade > 
</Hotel> 
</HotelList> 
</XML > 
</body></HTML> 


程序 运行 后 的 效果 如 图 5-14 所 示 。 


5.6 XML DTD 及 XML Schema 


在 数据 库 中 数据 表 用 来 存放 数据 ,数据 表 的 
结构 定义 (包括 主键 ,外 键 , 列 名 、 列 的 数据 类 型 和 


长 度 . 列 之 间 的 约束 关系 等 ) 保 存在 数据 库 系统 

中 。 如 果 把 XML 文档 看 成 数据 表 , 那 么 我 们 还 需 | 

要 一 种 文件 来 定义 XML 文档 中 数据 的 结构 类 型 DE 

及 其 让 专 关 系 管 ,这 种 文件 就 是 我 们 本 节 将 要 讨 国 二 14， 光 Mi 数据 久 在 浏览 和 

论 的 DTD(Document Type Definition, 文档 类 型 中 的 显示 效果 

定义 ) 和 XSD(XML Schema Definition) 文 件 。 因 

为 XML 文档 允许 自 建 标记 元 素 ,随意 创建 的 XML 文档 如 不 施加 某 种 规则 使 其 结构 化 ,将 
很 难 用 于 相互 之 间 的 数据 交换 。 因 此 DTD 和 XML Schema 想 要 解决 的 问题 是 如 何 实现 
XML 文档 的 结构 化 。 

DTD 文件 本 身 不 是 用 XML 标记 元 素来 组 织 的 ,其 描述 文档 类 型 的 方式 过 于 复杂 ,而 
XSD 文件 是 用 XML 标记 元 素来 组 织 的 ; 在 DTD 中 只 有 一 个 数据 类 型 ,就 是 用 在 元 素 中 的 
PCDATA 和 用 在 属性 中 的 CDATA ,在 里 面 写 日 期 也 行 ,数字 可 以 写 , 字 符 更 是 没 问 题 ,而 
XML Schema 正 是 针对 这 些 DTD 的 缺点 而 设计 的 ,具有 很 强 的 描述 能 力 、 扩 展 能 力 和 处 理 
维护 能 力 。 因 此 一 种 趋势 是 XML Schema 技术 将 成 为 文档 类 型 定义 方面 的 主流 技术 。 由 
于 DTD 和 Schema 用 来 描述 XML 数据 的 底层 组 织 结构 ,所 以 我 们 一 般 称 作 XML DTD 和 
XML Schema。 一 般 将 XML Schema 称 作 XML 模式 .但 微软 称 其 为 XML 架构 ,在 使 用 过 
程 中 可 混淆 这 两 种 叫 法 。 下 面 分 别 介绍 XML DTD 和 XML Schema。 
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5.6.1 XML DTD 


DTD 用 来 定义 XML 文档 中 可 以 使 用 的 元 素 符 号 、 元 素 的 属性 、 元 素 的 排列 方式 / 顺 
序 、 元 素 能 够 包含 的 内 容 、 可 使 用 的 实体 或 符号 规则 等 。 一 个 XML 文档 可 以 用 多 个 不 同 的 
DTD 来 进行 描述 。 在 XML 文档 中 使 用 DTD 有 两 种 方式 : 可 以 在 XML 文档 中 直接 设置 
(内 部 DTD) ,也 可 以 保存 为 一 个 完全 独立 的 文件 中 (外 部 DTD)。 此 外 也 可 两 者 兼 而 有 之 。 

1. 定义 内 部 DTD 

下 面 先 来 看 一 个 例子 ,以便 对 DTD 作 一 个 大 致 了 解 。 

【 例 5.15】 一 个 包含 了 DTD 定义 的 XML 文档 。 


<?xml version = "1.0" encoding = "utf — 8" standalone = "yes"?> 
<!DOCTYPE 联系 人 列表 [ 
<!ELEMENT 联系 人 列表 (联系 人 ) * > 
<!ELEMENT 联系 人 (姓名 ,ID, 公司 ,EMAIL, 电话 ,地 址 )> 
<!ELEMENT 地 址 (街道 ,城市 ,省 份 )> 
<!ELEMENT 姓名 (#PCDATA)> 
<! ELEMENT ID ( 井 PCDRTR)> 
<!ELEMENT 公司 ( 井 PCDRTR)> 
<! ELEMENT EMAIL ( # PCDATA)> 
<!ELEMENT 电话 ( #PCDATA)> 
<!ELEMENT 街道 ( 井 PCDRTR)> 
<!ELEMENT 城市 ( 井 PCDRTRA)> 
<!ELEMENT 省 份 ( #PCDATA)> 
]> 
< 联系 人 列表 > 
< 联系 人 > 
< 姓名 > 张 三 </ 姓 名 > 
<ID>001</ID> 
< 公司 > A 公司 </ 公 司 > 
< EMAIL > zhang@aaa. com </EMAIL> 
< 电话 >(010)62345678 </ 电 话 > 
< 地 址 > 
< 街道 > 五 街 1234 号 </ 街 道 > 
< 城市 > 北京 市 </ 城 市 > 
< 省 份 > 北 京 </ 省 份 > 
</ 地 址 > 
</ 联 系 人 > 
</ 联 系 人 列表 > 


通过 浏览 器 或 其 他 一 些 工 具 ( 称 作 XML 解析 器 ) 可 以 检查 上 述 XML 文档 的 有 效 性 。 
如 果 联 系 人 列表 中 的 数据 内 容 格式 和 二 ! DOCTYPE> 语 句 中 DTD 定义 部 分 相 吻 合 ,那么 
浏览 器 就 会 显示 如 图 5-15 所 示 效 果 , 和 否则 就 会 出 现 出 错 信息 。 

从 例 5. 15 可 以 看 出 ,为 了 将 DTD 声明 与 XML 文档 相关 联 ,XML 提供 了 特殊 的 
DOCTYPE 声明 。DOCTYPE 声明 必须 位 于 XML 声明 之 后 ,而 在 任何 文档 元 素 之 前 ,但 可 
在 这 两 者 之 间 插 入 注释 和 处 理 指令 ,其 语法 如 下 : 


加 CNDpocuments and Settings\Administrator.WCLNOTE\ 点 耐 \web ok Ed| 


<?xml version="1.0" encoding="utf-8" standalone="yes" ?> 
<!DOCTYPE 联系 人 列表 (View Source for full doctype...)> 
-< 联系 人 列表 > 
-< 联系 人 > 
< 姓名 > 张 三 </ 姓 名 > 
<ID>001</ID> 
< 公司 >A 公 司 </ 公 司 > 
<EMAIL>zhang®aaa.com</EMAIL> 
< 电话 >(010)62345678</ 电 话 > 
- < 地 址 > 
< 街道 > 五 衔 1234 号 </ 街 道 > 
< 城市 > 北京 市 </ 城 市 > 
< 省 份 > 北京 </ 省 份 > 
</ 地 址 > 
</ 联 系 人 > 
</ 联 系 人 列表 > 


到 
出 各  「「 厂 入 台地 7 
图 5-15 包含 DTD 定义 的 XML 文档 


<! DOCTYPE 文档 根 元 素 [ 
文档 类 型 定义 
]> 


例 5.15 同时 还 给 出 了 如 何 定义 DTD 中 的 元 素 , 其 通用 形式 如 下 : 


<! ELEMENT 元 素 名 规则 > 


有 效 的 XML 文档 中 用 到 的 每 个 元 素 都 必须 在 DTD 中 预先 定义 ,而 元 素 名 的 命名 规则 
也 必须 遵循 XML 文档 的 基本 语法 。 定 义 XML 文档 中 的 元 素 所 遵循 的 规则 是 多 样 的 ,主要 
的 规则 如 表 5-5 所 示 。 


表 5-5 元 素 声明 规则 


规 则 描 述 形 式 

EMPTY 规则 XML 元 素 必须 不 包含 任何 数据 <<! ELEMENT 元 素 名 EMPTY> 
例 : DTD 中 的 二 ! ELEMENT banner EMPTY 放 ,在 XML 文档 中 符合 规则 的 是 二 banner /二 或 者 
<banner></banner> 
#PCDATA 规则 | 元 素 不 含 子 元 素 , 仅 包含 字符 数据 二 ! ELEMENT 元 素 名 (#PCDATA) 
例 : DTD 中 的 二 ! ELEMENT 公司 (#PCDATA) 记 ,在 XML 文档 中 符合 规则 的 是 二 公司 之 A 公司 
二 /公司 > 
注 : 关键 字 PCDATA 表示 已 编译 的 字符 数据 (Parsed Character Data) 
多 声明 多 许 元 素 按 一 定 顺序 进行 钳 套 Wo 
例 : 二 ! ELEMENT 地 址 (街道, 城市, 省份) 二 表示 地 址 元 素 由 街道 ,城市 省份 3 个 子 元 素 组 成 

合 声明 人 允许 元 素 既 含 子 元 素 又 含 |<!ELEMENT 元 素 名 (#PCDATA|I 元 素 
#PCDATA 名 A)>> 
ANY 规则 元 素 中 可 包含 DTD 认可 的 任何 内 容 | 二 ! ELEMENT 元 素 名 ANY> 
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例 5. 15 在 定义 元 素 时 用 到 了 上 面 的 规则 ,此 外 还 使 用 了 诸如 * * ”的 符号 ,这 些 符号 千 
诉 XML 解析 器 在 XML 文档 中 该 元 素 的 出 现 次 数 ,具体 含义 见 表 5-6。 
表 5-6 元 素 出 现 次 数控 制 符 
符号 描 述 示 例 符号 描 述 示 例 


不 出 现 或 只 出 现 一 次 元 素 名 ? 出 现 一 次 或 多 次 元 素 名 十 
关 不 出 现 或 出 现 多 次 元 素 名 * (无 ) 只 出 现 一 次 元 素 名 


XML 文档 中 的 元 素 可 以 包含 各 种 属性 ,在 DTD 中 如 何 去 定 义 这些 属 性 呢 ? 只 需要 通 
过 关键 字 ATTLIST 来 定义 即 可 ,其 通用 形式 如 下 : 


<! ATTLIST 元 素 名 属性 名 类 型 默认 值 > 
属性 是 不 能 单独 存在 的 ,必然 属于 某 一 元 素 ,因此 在 上 面 的 定义 中 ,元 素 名 ?是 指 包含 
该 “属性 名 ”的 元 素 。 其 中 的 元 素 名 是 必需 的 ,因为 在 DTD 中 ,属性 可 以 放 在 任何 位 置 ,如 


没有 与 之 相对 应 的 元 素 名 , 则 XML 解析 器 就 很 难 辨别 该 属性 的 归属 ,导致 解析 错误 。 属 性 
的 默认 值 类 型 采用 表 5-7 中 的 4 种 之 一 。 


表 5-7 属性 默认 值 类 型 


序 号 类 型 描 述 
1 # REQUIRED 必须 提供 属性 值 
过 #IMPLIED 属性 值 是 可 选 的 
3 #FIXED VALUE | 属性 值 必须 提供 , 且 不 能 更 改 , 例 : # FIXED "center" 
4 Default 提供 默认 的 属性 值 


属性 的 类 型 表明 了 属性 值 的 级 别 ,属性 类 型 如 表 5-8 所 示 。 


表 5-8 属性 类 型 
序 号 类 型 描 述 
CDATA 属性 值 只 能 为 文本 串 
例 : 二 ! ATTLIST anElement myAttr CDATA #REQUIRED>> anElement 元 素 的 myAttr 属性 必须 


为 字 串 
在 XML 文档 中 表示 : 二 anElement myAttr=="I love you! "二 
Enumerated | 列 出 该 属性 值 的 取 值 范围 ,一 次 只 能 有 一 个 属性 值 能 够 赋予 属性 
例 : 二 ! ATTLIST anElement myAttr (left| center|right) "center" 二 ”默认 为 center, 可 三 选 一 
在 XML 文档 中 表示 : 二 anElement myAttr 一 "left" 过 
表示 属性 值 必须 以 字母 或 下 划 线 开头 ,之 后 可 以 是 字母 ,数字 .下 划 线 、 圆 点 、 
和 短 横 线 ,不 能 有 空格 
例 : 二 ! ATTLIST anElement myAttr NMTOKEN #REQUIRED> 
在 XML 文档 中 表示 : 二 anElement myAttr 一 ”Al123. 555 一 1" 之 
4 NMTOKENS | 表示 属性 值 能 够 由 多 个 NMTOKEN 组 成 ,每 个 NMTOKEN 之 间 用 空格 隔 开 
例 : 二 ! ATTLIST anElement myAttr NMTOKENS #REQUIRED> 
在 XML 文档 中 表示 : 二 anElement myAttr 一 ”Al123. 555 一 1 _A778. AC 一 1 ABCDEF"> 
5 ID 该 属性 在 XML 文件 中 是 唯一 的 ,常用 来 表示 人 的 身份 证 号 码 


3 NMTOKEN 
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序 号 类 型 描 述 
例 : 二 ! ATTLIST anElement myAttr ID #REQUIRED> 
6 IDREF 表示 该 属性 值 是 参考 了 另 一 个 ID 属性 


例 : 二 ! ATTLIST book publisher IDREF # REQUIRED> 表示 元 素 book 的 属性 publisher 的 值 来 自 
元 素 publisher 的 ID 属性 值 
在 XML 文档 中 表示 : 二 book publisher=="p009" 之 二 publisher publishID 一 "p009" 僵 


7 IDREFS 表示 该 属性 值 是 参考 了 多 个 ID 属性 ,这 些 ID 属性 值 用 空格 隔 开 


8 ENTITY 表示 该 属性 的 设置 值 是 一 个 外 部 的 实体 ENTITY, 如 一 个 图 片 文件 


9 ENTITIES 表示 该 属性 值 包含 多 个 外 部 的 ENTITY ,不 同 的 ENTITY 之 间 用 空格 隔 开 


10 NOTATION | 将 属性 值 和 DTD 中 的 二 ! NOTATION> 声 明 联 系 起 来 


其 实 , 一 个 复杂 的 XML 文档 除了 包含 元 素 ( 元 素 中 可 能 含有 属性 ) 外 ,还 包含 其 他 一 些 
类 型 ,诸如 实体 (ENTITY) ,标记 (NOTATION) 等 。 本 书 在 此 不 作 介 绍 ,读者 可 参阅 相关 
资料 。 

2. 定义 外 部 DTD 

一 个 良好 的 XML 文档 应 是 : 文档 只 存放 相关 的 数据 ,而 将 有 关 该 文档 的 一 切 定 义 放 在 
外 部 文件 中 ,在 文档 中 只 是 使 用 简单 的 语句 使 之 建立 联系 ,从 而 提高 文档 的 可 读 性 和 可 维护 
性 。 外 部 DTD 就 是 基于 此 而 被 人 们 大 量 使 用 。 

【 例 5.16】 采用 外 部 DTD 的 XML 文档 示例 。DTD 文件 ex_5_16. dtd 的 内 容 如 下 : 


<?xml version= "1.0" encoding = "utf - 8"?> 
<!ELEMENT 联系 人 列表 (联系 人 ) * > 
<!ELEMENT 联系 人 (姓名 , EMAIL, 地 址 )> 
<!ELEMENT 地 址 (街道 ,城市 ,省 份 )> 
<!ELEMENT 姓名 ( # PCDRTR)> 

<! ELEMENT EMAIL ( # PCDATA)> 

<!ELEMENT 街道 ( #PCDATA)> 

<!ELEMENT 城市 ( #PCDATA)> 

<!ELEMENT 省 份 ( 六 PCDATA)> 


XML 文件 ex_5_16. xml 的 内 容 如 下 :; 


<?xml version = "1.0" encoding = "utf ~ 8" standalone = "no"?> 
<!DOCTYPE 联系 人 列表 SYSTEM "ex 5_16. dtd"> 
< 联系 人 列表 > 
< 联系 人 > 
< 姓名 > 张 三 </ 姓 名 > 
< EMAIL > zhang@aaa. com </EMAIL> 
< 地 址 > 
< 街道 > 五 街 1234 号 </ 街 道 > < 城市 > 北京 市 </ 城 市 > < 省 份 > 北京 </ 省 份 > 
</ 地 址 > 
</ 联 系 人 > 
</ 联 系 人 列表 > 
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从 该 例 可 看 出 ,定义 外 部 DTD 与 定义 内 部 DTD 差不多 ,只 是 将 DTD 作为 一 个 后 级 名 
为 . dtd 的 独立 文档 来 存放 。 在 XML 文档 中 引用 该 文件 时 ,首先 将 XML 声明 中 的 属性 
“standalone” 设 置 为 “no”, 然 后 在 DOCTYPE 声明 中 采用 如 下 说 明 即 可 : 


<! DOCTYPE 根 元 素 名 SYSTEM "DTD 文件 名 "> 


其 中 ,如 果 采 用 了 关键 字 SYSTEM 则 必须 要 求 该 DTD 文档 是 XML 文档 私有 的 ,如 果 系 统 
中 存在 不 止 一 个 文档 使 用 该 DTD 作为 模板 , 则 可 采用 另 一 关键 字 PUBLIC, 则 DOCTYPE 
声明 就 变 为 如 下 形式 : 


<! DOCTYPE 根 元 素 名 PUBLIC "DTD 文件 名 "或 "URI of DTD"> DID 文件 名 可 以 是 DTD 文件 的 URI。 


5.6.2 XML Schema 


前 面 介绍 的 DTD 本 身 是 存在 许多 缺陷 的 ,主要 如 下 : 

(1) DTD 是 用 不 同 于 XML 的 语言 编写 的 ,需要 不 同 的 解析 器 技术 。 这 增加 了 工具 开 
发 商 的 负担 ,他 们 不 仅 要 开发 用 于 XML 文档 自身 的 解析 器 ,还 要 专门 开发 用 于 DTD 的 解 
析 器 。 此 外 ,对 于 那些 学 习 XML 技术 的 人 来 说 ,还 得 专门 去 学 习 DTD 的 语法 规则 。 

(2) DTD 不 支持 名 称 空间 (又 叫 名 域 空间 或 名 字 空 间 ) 。 而 XML 的 优点 是 能 够 很 好 地 
支持 数据 之 间 的 跨 平台 或 跨 系统 ,如 果 没有 名 称 空间 , 则 各 种 名 称 就 会 发 生 冲 突 , 致 使 数据 
之 间 无 法 正确 识别 。 

(3) DTD 不 支持 继承 和 子 类 。 

(4) DTD 中 没有 数据 类 型 的 概念 ,就 无 法 验证 某 些 具有 特殊 含义 的 元 素 是 否 符合 预先 
定义 的 要 求 。 

正 是 意识 到 DTD 存在 上 述 薄 弱 环 节 , W3C 自 1999 年 初 开始 ,以 推荐 的 方式 提出 一 种 
新 的 解决 方案 来 定义 XML 文档 的 结构 、 内 容 和 请 法。 这 就 是 我 们 通常 所 说 的 XML 模式 
(Schema) 或 架构 (微软 称 之 为 架构 )。 

XML 模式 发 展 到 现在 已 经 有 很 多 版 本 ,微软 在 VS. NET 2002 中 最 先 采 用 XML-DR 
(XML Data-reduced Schema) ,此 后 2004 年 10 月 W3C XML Schema 1. 1 建议 标准 发 布 。 
微软 VS 2010 完全 支持 上 述 多 种 版 本 。 初 学 XML Schema 的 读者 在 阅读 有 关 方 面 的 资料 
时 ,可 能 会 发 现 它们 介绍 的 语法 规则 不 尽 相同 ,容易 产生 云 里 雾 里 的 感觉 。 因 此 本 节 的 例子 
将 完全 采用 W3C XML Schema 来 验证 XML 文档 ,全 部 在 VS 2010 环境 下 调试 通过 。 

XML Schema 的 一 个 应 用 就 是 异 构 数 据 交 换 。 例 如 可 以 将 SQL Server 数据 库 中 的 数 
据 取出 来 ,形成 XSD 和 XML 文件 ,XSD 存放 数据 结构 描述 ,XML 存放 数据 内 容 , 然 后 可 以 
将 这 两 个 文件 穿 过 防火 墙 传送 到 Linux 操作 系统 的 Sybase 数据 库 中 ,实现 异 构 操 作 平 台 
异 构 数 据 库 的 数据 交换 。 如 果 没 有 XSD 文件 .只 有 XML 文件 ,那么 数据 内 容 将 因 缺 乏 数 
据 结 构 描 述 而 无 法 自动 放 入 Sybase 数据 库 中 。XML Schema 的 另外 一 个 应 用 就 是 电子 数 
据 交 换 。 例 如 国内 某 公司 需要 向 美国 订购 一 批 原材料 ,把 这 些 订 购 数 据 按 既 定 规 则 自动 生 
成 结构 描述 XSD 文件 和 内 容 描述 XML 文件 ,传送 给 美方 公司 ,美方 公司 依据 这 些 数据 即 
可 开具 发 货 单 。 
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与 DTD 类似, 模式 也 是 用 来 描述 XML 文档 的 内 容 和 结构 的 ,同时 也 是 在 运行 XML 文 
档 时 解析 器 验证 XML 文档 有 效 性 的 依据 。 在 使 用 模式 时 , 常 使 用 两 种 文档 类 型 , 即 实例 文 
档 ( 也 就 是 我 们 通常 所 说 的 XML 文档) 和 模式 文档 (扩展 名 为 XSD) 。 

首先 来 看 一 个 使 用 模式 的 XML 文档 ,了 解 其 大 致 构成 。 

【 例 5. 17】〗 采用 模式 验证 的 XML 文档 。XML 文档 ex_5_17. xml 的 内 容 如 下 : 


1 <?xml version = "1.0" encoding= "utf -8" ?> 
2 <booklist xmlns:xsi= "http://www.w3.org/2001/XMLSchema— instance" 
3 xsi:noNamespaceSchemaLocation= "ex 5 17.xsd"> 
4 ”<book classify = "自然 科学 "> 
<ISBN>7- 302—12066- 8</ISBN> 

6 <title > JAVA 实用 教程 </title> 
<authorlist> 

8 <author > Herbert Schildt </author> 
9 < author > 马 海军 </author > 

10 </authorlist> 

11 < price> 64.00</price> 

12 </book> 

13 <book classify = "社会 科学 "> 

14 <ISBN>7- 5037- 1978 </ISBN> 

15 <title> 投 资 学 </title> 

16 < authorlist> 

是 < author > 张 中 华 </author > 

18 < author > 谢 进 城 </author > 

19 </authorlist> 

20 <price>19.00</price> 

21 </book> 

22 </booklist> 


验证 上 述 XML 文档 的 模式 文档 ex_5_17. xsd 的 内 容 如 下 : 


1 <?xml version="1.0" encoding= "utf 一 8"?> 

2 <xs:schema id= "ex 5 _17" elementFormDefault = "qualified" 

3 xmlns:xs= "http://www.w3.org/2001/XMLSchema"> 

4 <xs:element name = "booklist"> 

四 <xs:complexType> 

6 <xs:sequence> 

7 <xs:element name = "book" maxOccurs = "unbounded"> 

8 <xs:complexType> 

9 <xs:sequence> 

10 <xs:element name = "ISBN" type= "xs:string" /> 
人 <xs:element name = "title" type= "xs:string" /> 
12 <xs:element name = "authorlist" min0ccurs = "1" > 
3 <xs:complexType> 

14 <xs:sequence> 

5 <xs:element name = "author" type= "xs:string" maxOccurs="5"/> 
16 </xs:sequence> 

a </xs:complexType> 

18 </xs:element > 

19 <xs:element name = "price" type = "xs:decimal" /> 
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20 </xs: sequence> 

21 <xs:attribute name = "classify" use= "required"> 
帮 <xs:simpleType> 

23 <xs:restriction base = "xs:string"> 
24 <xs:enumeration value = "社会 科学 " /> 
25 <xs:enumeration value= "自然 科学 " /> 
26 </xs:restriction> 

27 </xs:simpleType> 

28 </xs:attribute> 

29 </xs:complexType> 

30 </xs:element > 

31 </xs:sequence> 


32 </xs:complexType> 
33 </xs:element> 
34 </xs:schema> 


ex_5_17. xml 文档 通过 第 3 行 的 xsi:noNamespaceSchemaLocation 二 "ex_5_17. xsd" 调 
用 模式 文档 ex_5_17. xsd。 运 行 XML 文档 ,就 会 根据 模式 文档 验证 其 结构 有 效 性 。 

上 面 的 XSD 文件 在 VS 2010 中 生成 的 过 程 如 下 : 在 VS 2010 中 , 右 击 “解决 方案 资源 
管理 器 ”中 的 项 目 名 或 子 文件 夹 ,选择 “添加 新 项 ”, 在 弹出 的 对 话 框 中 选择 “XML 架构 ”, 输 
入 文件 名 后 单 击 “ 添 加 ”, 就 可 形成 一 个 空 的 XSD 文件 ,并 出 现 XSD 设计 器 界面 ,如 图 5-16 
所 示 。 选 择 “ 使 用 XML 编辑 器 查看 和 编辑 基础 XML 架构 文件 ”, 手 工 输入 上 述 代 码 。 完 成 
后 ,可 将 自动 生成 的 对 应 结 点 从 XML 架构 资源 管理 器 拖 到 设计 图 面 上 ,查看 各 个 结 点 的 详 
细 信 息 和 结 点 之 间 的 关系 。 在 各 结 点 上 右 击 ,选择 “查看 代码 ”, 就 可 看 到 XSD 文件 内 容 。 
VS 2010 环境 下 ,在 编辑 对 应 的 XML 文档 过 程 中 会 自动 按照 XSD 来 验证 其 内 容 。 

ex5 xsd XMLSchema2xsd [设计 ] x 有 

: ESE 


将 结 点 | 


名 和 集中 的 全 局 、| 一 | - - | x 


架构 集 
4 {} httpy//tempuri.org/XMLSc 
4 国 ex5_17xsd 
4 €> booklist 
4 €7book [1.] 
《2ISBN 
?tide 
4 47authorlict 
《yauthor [L 
《3 price xsdeci 
@dassif ~ 


| 


图 5-16 VS 2010 中 的 XSD 设计 器 


从 例 5. 17 可 以 看 出 ,模式 文档 是 完全 依照 XML 的 基本 语法 和 结构 来 组 织 的 。 与 
XML 文档 相似 ,模式 文档 中 也 存在 一 个 唯一 的 根 元 素 过 Schema 之 … 反 /Schema> ,该 元 素 
放 在 文档 的 最 开头 ,表明 此 文档 是 模式 文档 ,其 结构 如 下 : 

< Schema name = " schema — name" xmlns = "namespace" > 


其 他 子 元 素 
</Schema > 


在 例 5. 17 定义 XSD 模式 文档 中 ,会 用 到 一 些 重要 概念 : 实例 文档 ` 名 称 空间 、 元 素 、 复 
合 类 型 .简单 类 型 和 属性 。 下 面 分 别 对 这 些 概 念 进行 介绍 。 

1. 实例 文档 

被 XML 模式 文件 来 验证 的 XML 文档 就 称 作 实 例文 档 。 

2. 名 称 空间 

名 称 空间 是 读者 在 学 习 XML Schema 技术 过 程 中 最 难 掌握 和 应 用 的 一 个 重要 概念 。 
在 学 习 XML Schema 时 应 着 重 掌握 以 下 几 点 : 

(1) 由 于 XML 文档 允许 自己 定义 标志 元 素 ,在 处 理 XML 文档 ,例如 合并 两 个 XML 文 
档 时 ,相同 的 标志 元 素 可 能 有 着 完全 不 同 的 含义 ,因此 采用 名 称 空间 来 解决 XML 文档 标志 
元 素 的 冲突 问题 。 在 XML Schema 技术 中 ,名 称 空间 区 分 为 两 种 ,一 种 是 一 些 大 公司 或 机 
构 所 提供 的 基础 名 称 空间 ,用 来 规定 XSD 和 XML 文档 的 结构 形式 以 及 相关 数据 类 型 等 
另 一 种 是 用 户 定义 的 名 称 空间 ,可 用 来 防止 XML 文档 中 元 素 的 重 名 。 

(2) W3C XML Schema 建议 规范 中 有 两 个 基础 名 称 空 间 : http://www. w3. org/ 
2001/ XMLSchema 和 http://www. w3. org/2001/XMLSchema-instance。 前 者 用 于 XSD 
文档 ,后 者 用 于 XML 文档 。 使 用 方法 见 上 例 ex_5_17. xml 和 ex_5_17. xsd 中 的 第 2 行 和 
第 3 行 。 它 们 的 作用 是 用 这 两 个 基础 名 称 空 间 来 约束 XSD 和 XML 文档 所 遵循 的 规范 。 
例如 在 这 样 的 名 称 空间 中 ,可 以 使 用 的 数据 类 型 有 : 


Anytype、 anyURI, base64Binary, boolean, byte, date, datetime, decimal, double, duration, ENTITY、 
ENTITIES, float, gDay, gMonth, gMonthDay, gYear, gYearMonth, hexBinary, ID、 IDREF、\ IDREFS, int、 
integer, language、, long, NAME, NCNAME negativeInteger, NMTOKEN, NMTOKENS、 nonNegativeInteger、 
nonPositiveInteger, normalizedString、 NOTATION、 positiveInteger、 QNAME、 short、 string, time、 
token .unsignedByte .unsignedInt ,unsignedLong .unsignedshort 


如 果 用 其 他 的 名 称 空间 , 则 数据 类 型 可 能 就 不 是 或 不 完全 是 上 面 所 列 的 内 容 。 

(3) 因 URI 具有 唯一 性 ,所 以 名 称 空间 采用 URI, 并 采用 前 组 的 方式 来 表示 。 这 样 ,在 
名 称 空间 中 声明 的 标志 元 素 就 可 以 保证 其 唯一 性 ,相互 之 间 就 不 会 有 冲突 。 上 例 中 采用 了 
W3C 推荐 使 用 的 公共 前 级 : XML 模式 URI 前 级 为 "xs:"; XML 文档 实例 URI 的 前 缀 为 
"xsi:"。 若 你 想 在 XSD 文件 中 使 用 自己 的 前 级 "myxs:" 来 代替 "xs:", 则 修改 ex_5_17. xsd 
文件 的 所 有 "xs" 为 ”myxs"。XSD 中 的 名 称 空间 前 缀 "xs:" 可 以 自 定义 ,但 随后 的 基础 名 称 
空间 的 URI 不 能 更 换 。 当 然 也 可 将 "xs" 改 为 "xsd" 或 不 用 前 级。 微软 早期 采用 了 "xsd" 前 
级 ,名 称 空间 用 schemas-microsoft-com: xml-data, 不 过 现在 已 采用 W3C 推荐 的 名 称 空间 。 
例如 ,将 ex_5_17. xsd 文档 中 的 前 级 改 成 myxs 后 的 内 容 如 下 : 


<?xml version= "1.0" encoding = "utf - 8"?> 

<myxs:schema id= "ex 5 17" elementFormDefault = "qualified" 

xmlns:myxs = "http://www. w3.org/2001/XMLSchema"> 
<myxs:element name = "booklist"> 


</myxs:element > 
</myxs:schema > 
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(4) 一 个 XML 文档 可 以 使 用 多 个 XSD 文件 来 验证 , 需 在 XSD 文件 中 使 用 target- 
Namespace 属性 指定 目标 名 称 空间 。 将 例 5. 17 中 ex_5_17. xsd 文件 的 第 2、3 行 修 改 为 (其 
他 不 变 ) : 


< xs: schema id = "ex _5_17" xmlns: txs = "http://local" targetNamespace = " http: //local" 
elementFormDefault = "qualified" xmlns:xs = "http://www.w3.org/2001/XMLSchema"> 


其 中 声明 了 一 个 前 级 为 txs 的 名 称 空间 http://local, 通 过 targetNamespace 属性 指定 XML 
文档 将 会 采用 目标 名 称 空间 http://local 来 验证 。 然 后 在 ex_5_17. xml 文档 中 通过 
schemaLocation 指定 XSD 中 定义 的 目标 名 称 空间 和 XSD 文件 路 径 ( 注 意 : XSD 文件 名 和 
目标 名 称 空间 之 间 有 一 个 空格 ) ,这 样 就 可 通过 XSD 来 验证 该 XML 文档 。 


<?xml version = "1.0" encoding = "utf 一 8”?> 
< txs:booklist xmlns:txs = "http://1local" xsi:schemaLocation = "http://local ex_5_17.xsdn" 
xmlns:xsi = "http://www.w3.org/2001/XMLSchema - instance" > 

< txs:book classify = "自然 科学 "> 


</txs:book> 
<txs:book classify = "社会 科学 "> 


</txs:book> 
</txs:booklist> 


上 例 介绍 的 是 采用 一 个 目标 名 称 空间 的 XSD 文件 来 验证 XML 文档 ,车 有 多 个 XSD 
文件 来 验证 XML 文档 , 则 需 按 上 述 方式 分 别 指定 每 个 XSD 文件 的 目标 名 称 空间 ,然后 将 
具有 目标 名 称 空间 的 XSD 文件 与 XML 实例 文档 相关 联 。 在 XML 文档 中 通过 
schemaLocation 可 以 列 出 多 对 URI 引用 ,每 一 对 都 有 不 同 的 目标 名 称 空 间 部 分 ,例如 : 


<p:Person xmlns:p="http://localhost/People" xmlns:v= "http://localhost/ 
Vehicles" 
xmlns:xsi= "http://www. w3. org/2001/XMLSchema - instance" 
xsi:schemaLocation = "http://localhost/People http://localhost/schemas/people. xsd 
http://localhost/schemas/Vehicles http://localhost/schemas/vehicles. xsd"> 
<name> John </name > 
<age> 28 </age> 
< height > 59 </height > 
<v:Vehicle> 
<color>Red</color> 
<wheels> 4</wheels> 
<seats>2</seats> 
</v:Vehicle> 
</p:Person > 


3. 简单 类 型 (simpleType) 
使 用 简单 类 型 simpleType 元 素 可 自 定义 用 户 数据 类 型 ,例如 : 


<xs:simpleType name = "orderQuantity"> 
<xs:restriction base = "xs:integer"> 
<xs:minInclusive value= "1" /> 
<xs:maxInclusive value = "50" /> 
</xs:restriction> 


</xs:simpleType> 


说 明 : 上 述 代码 自 定义 了 一 个 orderQuantity 数据 类 型 , 它 是 介 于 1 和 50 之 间 的 整数 
值 。 其 中 orderQuantity 为 自 定义 数据 类 型 名 称 ,restriction 元 素 中 通过 base 属性 指定 使 用 
哪 种 数据 类 型 ,minInclusive 和 maxInclusive 元 素 被 称 作 facet 元 素 ,指定 取 值 范围 。facet 
元 素 除 了 minInclusive 和 maxlInclusive 外 ,还 有 minExclusive 和 maxExclusive 元 素 用 来 指 
定 不 在 此 取 值 范围 的 值 ; length 元 素 用 来 限制 字符 串 的 长 度 ,minLength 和 maxLength 元 
素 用 来 指定 元 素 内 容 的 长 度 范围 ; pattern 元 素 可 用 于 以 正则 表达 式 限制 元 素 的 数据 内 容 ，; 
fractionDigits 和 totalDigits 元 素 用 于 表示 小 数位 数 和 十 进 制 最 大 数 ; enumeration 元 素 用 
来 表示 枚 举 值 。 例 如 下 面 定义 了 一 个 IDType 数据 类 型 ,用 以 限制 身份 证 号 码 为 18 位 的 数 
字 字 符 串 ， 
<xs:simpleType name = "IDTYpe"> 
<xs:restriction base= "xs:string"> 
<xs:length value = "18" /> 
<xs:pattern value= "[0-9]*" /> 


</xs:restriction> 
</xs:simpleType> 


4. 元 素 (element) 
在 模式 中 定义 元 素 的 格式 为 “一 xs:element name 一 "元 素 名 "二 ”。 元 素 又 可 区 分 为 复 
合 类 型 (complexType) 元 素 和 值 类 型 元 素 。 值 类 型 元 素 不 包含 子 元 素 , 其 语法 格式 为 ， 


<xs:element name = "元 素 名 " type = "数据 类 型 " default = "默认 值 " fixed = "固定 值 " 
maxOccurs = "整数 " min0ccurs = "整数 "> 


其 中 ,maxOccurs 和 minOccurs 表示 该 元 素 出 现 的 最 大 和 最 小 次 数 , 不 限 次 数 时 取 值 
unbounded。default 和 fixed 分 别 用 来 指定 该 元 素 的 默认 值 和 元 素 所 具有 的 固定 取 值 ,它们 
不 可 同时 出 现 。type 用 来 指定 数据 类 型 ,例如 xs:string xs:integer 等 。 若 该 元 素 使 用 自 定 
义 用 户 数据 类 型 , 则 在 type 属性 中 输入 自 定义 数据 类 型 名 称 ,例如 采用 上 面 simpleType 中 
定义 的 orderQuantity 数据 类 型 ,输入 type 二 "orderQuantity"。 

5. 组 (sequence) 

sequence 元 素 可 用 于 指定 一 个 组 ,要 求 组 中 的 元 素 以 指定 的 先后 顺序 依 序 出 现在 容器 
元 素 中 。 在 要 求 若 干 子 元 素 依次 出 现 的 地 方 就 必须 加 上 “到 xs: sequence 这 … 达 /xs: 
Sequence 二 ”。 

除了 sequence 元 素 外 ,还 可 用 choice 元 素来 定义 一 个 组 ,但 组 中 的 元 素 只 能 选择 其 中 
之 一 ; 用 group 来 建立 一 个 组 ,其 中 又 可 包括 sequence 和 choice 元 素 等 。 
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6. 复合 类 型 (complexType) 
复合 类 型 可 以 看 作 是 模式 中 元 素 的 基本 容器 。 这 种 类 型 可 能 有 多 个 子 元 素 或 多 个 属 
性 ,采用 如 下 形式 定义 : 


<xs:element name = "元 素 名 "> 
<xs:complexType > 
<xs:sequence> 


</xs:complexType> 
</xs:element > 


下 面 代码 即 定义 一 个 复合 类 型 ,在 XML 文档 中 元 素 zooAnimals 元 素 包 含 elephant、 
bear、giraffe 共 3 个 子 元 素 ,这 3 个 子 元 素 出 现 的 次 数 不 限 ,但 在 实例 文档 中 必须 依次 出 现 。 


<xs:element name = "zooAnimals"> 
<xs:complexType> 
<xs:sequence minOccurs = "0" maxOccurs = "unbounded"> 
<xs:element name = "elephant"/> 
<xs:element name = "bear"/> 
<xs:element name = "giraffe"/> 
</xs: sequence> 
</xs:complexType> 
</xs:element > 


7. 属性 

与 DTD 类 似 ,模式 在 定义 元 素 时 同样 需要 考虑 哪些 元 素 有 属性 ,都 有 些 什么 属性 , 怎 
样 去 定义 这 些 属 性 。 在 前 面 介绍 复合 类 型 的 元 素 时 ,我 们 也 可 以 看 到 属性 定义 的 放置 位 置 。 
其 一 般 格 式 为 : 

<xs:attribute name = "属性 名 称 " type= "数据 类 型 " default = "默认 值 " fixed = "固定 值 " 


use = "required/prohibited/optional" > 
</xs:attribute> 


其 中 , type 用 来 指定 属性 数据 类 型 ,例如 xs: string、xs: boolean 等 ,也 可 用 来 指定 
simpleType 自 定义 数据 类 型 名 称 。use 用 来 表示 该 属性 的 使 用 方式 ,有 3 个 选项 required/ 
prohibited/optional ,分 别 表示 该 属性 必须 输入 一 个 值 . 禁 止 使 用 此 属性 、 属 性 可 有 可 无 ( 默 
认 值 )。 例 如 ,在 XML 实例 文档 中 存在 这 样 的 代码 片段 : 


<weight units = "1bs"> 24.50 </weight> 


在 模式 中 则 必须 采用 如 下 的 定义 方式 ,才能 说 明 这 一 代码 是 有 效 的 。 


<xs:element name = "weight"> 
<xs:complexType > 
<xs:attribute name = "units" type = "xs:float" /> 
</xs:complexType> 
</xs:element > 


若 换 用 用 户 自 定义 数据 类 型 , 则 属性 定义 过 程 为 : 


<xs:element name = "weight"> 
<xs:complexType > 
<xs:attribute name = "units"> 
<xs:simpleType> 
<xs:restriction base = "xs:decimal"> 
<xs:fractionDigits value= "2" /> 
</xs:restriction> 
</xs:simpleType> 
</xs:attribute> 
</xs:complexType> 
</xs:element > 


在 VS 2010 中 ,如 果 你 已 经 创建 了 XML 文档 ,可 以 基于 现 有 XML 文档 创建 对 应 的 架 
构 文 件 。 方 法 是 在 VS 2010 中 首先 打开 XML 文档 ,然后 鼠标 单 击 主 菜单 XML|* 创 建 架 
构 ”, 即 可 马上 生成 同样 文件 名 的 XSD 文件 。 当 然 若 需 将 两 个 文件 联系 起 来 ,还 需要 手工 在 
XML 文档 根 元 素 中 加 入 实例 名 称 空间 ,可 参见 例 5. 17 中 ex_5_17. xml 文档 的 第 2、3 行 。 

以 上 介绍 了 如 何 利 用 XML Schema 来 验证 一 个 XML 文档 的 有 效 性 。 如 读者 对 这 方面 
感 兴趣 可 以 查询 相关 资料 进行 深入 探讨 和 研究 。 


5.7 XML DOM 及 其 编程 实例 


前 面 讨 论 的 都 是 针对 一 个 已 有 的 XML 文档 ,如 何 通过 CSS、XSLT 利用 浏览 器 解析 和 
浏览 它 ,如 何 通过 DTD 和 XML Schema 来 验证 它 的 数据 结构 。 这 一 节 要 学 习 的 内 容 是 如 
何 动态 生成 一 个 XML 文档 ,如 何 对 XML 文档 进行 数据 的 添加 、 删 除 .查询 等 操作 。 这 可 以 
在 VB/VC/Delphi/JavaScript/ASP. NET 等 应 用 程序 开发 中 通过 XML 接口 程序 来 访问 
XML 文档 然后 实现 。 访 问 XML 文档 的 标准 应 用 程序 接口 有 两 种 : W3C 提出 的 DOM 
(Document Object Model) 和 XML_DEYV 邮件 列表 成 员 提 出 的 SAX (Simple API for 
XML) 。 


5.7.1 XML DOM 与 SAX 简介 


XML DOM 是 W3C 提出 的 针对 XML 的 文档 对 象 模型 , 它 独 立 于 平台 和 语言 ,定义 了 
一 套 标准 的 用 于 XML 的 对 象 和 一 种 标准 的 访问 与 处 理 XML 文档 的 方法 。 

对 于 XML 应 用 开发 来 说 ,DOM 就 是 一 个 对 象 化 的 XML 数据 接口 ,一 个 与 语言 无 关 、 
与 平台 无 关 的 标准 接口 规范 。 它 定义 了 XML 文档 的 逻辑 结构 ,给 出 了 一 种 访问 和 处 理 
XML 文档 的 方法 。 利 用 DOM ,程序 开发 人 员 可 以 动态 地 创建 XML 文档 ,遍历 文档 结构 ， 
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添加 、 人 和 修改、 删除 文档 内 容 ,改变 文档 的 显示 方式 ,等 等 。 可 以 这 样 说 ,文档 代表 的 是 数据 ,而 
DOM 则 代表 了 如 何 去 处 理 这 些 数据 。 无 论 是 在 浏览 器 里 还 是 在 浏览 器 外 ,无 论 是 在 服务 
器 还 是 在 客户 端 ,只 要 有 用 到 XML 的 地 方 ,都 可 利用 DOM 接口 进行 编程 应 用 。 

DOM 接口 中 的 XML 分 析 器 ,在 对 XML 文档 进行 分 析 之 后 ,不 管 这 个 文档 有 多 简单 
或 者 多 复杂 ,其 中 的 信息 都 会 被 转化 成 一 棵 对 象 结 点 树 一 一 DOM 树 , 也 即 DOM 将 XML 
文档 作为 树 结构 来 看 待 。 在 这 棵 结 点 树 中 ,有 一 个 Document 根 结 点 ,所 有 其 他 结 点 都 是 根 
结 点 的 后 代 结 点 。 结 点 树 生成 之 后 ,就 可 以 通过 XML DOM 接口 访问 ,修改 、 添 加 、 删 除 树 
中 的 结 点 和 属性 以 及 文本 内 容 , 等 等 。 
DOM 将 XML 文档 中 的 每 个 成 分 看 作 一 个 结 点 。 例 如 整个 文档 是 一 个 文档 结 点 ; 每 
个 XML 标签 是 一 个 元 素 结 点 ; 包含 在 XML 元 素 中 的 文本 是 文本 结 点 ; 每 一 个 XML 属性 
是 一 个 属性 结 点 ; 注释 属于 注释 结 点 。 
【 例 5.18】 DOM 把 XML 文件 当 作 一 种 树 型 结构 。 每 个 元 素 、 属 性 以 及 XML 文档 中 
的 文本 都 可 以 看 成 树 上 的 结 点 。 一 个 结 点 树 可 以 把 一 个 XML 文档 展示 为 一 个 结 点 集 , 以 
及 它们 之 间 的 连接 。 在 一 个 结 点 树 中 ,最 项 端的 结 点 被 称 为 根 ; 每 一 个 结 点 ,除根 之 外 ,都 
拥有 父 结 点 ; 一 个 结 点 可 以 有 无 限 的 子 结 点 ; 叶 是 无 子 结 点 的 结 点 ; 同 级 结 点 指 拥有 相同 
的 父 结 点 。 下 面 的 ex_5_18. xml 文档 ,其 DOM 结 点 树 如 图 5-17 所 示 。 


<?xml version= "1.0" encoding = "UTF - 8" ?> 
< bookstore> 
< book category = "COOKING"> 
<title lang = "en"> Everyday Italian </title> 
< author > Giada De Laurentiis </author > 
< year > 2005 </year > 
<price> 30.00</price> 
</book > 
< book category = "CHILDREN"> 
<title lang = "en"> Harry Potter </title> 
<author >J K. Rowling </author> 
< year > 2005 </year > 
<price> 29.99 </price> 
</book > 
< book category = "Web"> 
<title lang = "en"> XQuery Kick Start </title> 
< author > James McGovern </author > 
< author > Per Bothner </author > 
<author > Kurt Cagle </author > 
<author > James Linn </author > 
< author > Vaidyanathan Nagarajan </author > 
<year>2003</year> 
<price> 49.99 </price> 
</book > 
<book category = "Web"> 
<title lang = "en"> Learning XML </title> 
<author > Erik T. Ray</author > 
<year>2003</year> 
<price> 39.95 </price> 
</book> 
</bookstore> 


Mozilla 和 正 浏览 器 都 支持 W3C DOM 规范 。 但 IE 和 Mozilla 在 DOM 的 处 理 方式 上 
存在 某 些 差异 。 微 软 的 XML 解析 器 是 和 IE 5 以 及 更 高 版 本 浏览 器 合 在 一 起 的 COM 组 


图 5-17 XML 文档 的 DOM 结 点 树 


件 。 一 旦 安装 了 IE, 就 可 使 用 XML DOM 了 。 


通过 XML DOM 接口 ,应 用 程序 可 在 任何 时 候 访 问 XML 文档 中 的 任何 一 部 分 数据 ， 


因此 ,这 种 利用 XML DOM 接口 的 机 制 也 被 称 作 随机 访问 机 制 。 


Root element: 
结 点 
<bookstore> 根 结 点 
Parent 
元 素 结 点 Child 属性 结 点 
Element: Attribute: 
“lang” <book> “category” 
Element: Element: Element: Element: 
<title> <author> <year> <price> 
Siblings ep 
Text: 文本 结 点 
Text: Giada De Text: Text: 
Everyday ltalian Laurentiis 2005 30.00 
Root element: ParentNode _ 
<bookstore> | 4 个 book 元 素 结 点 是 
点 bookstore 的 子 
结 点 childNodes 
firstChild Element: 
<book> 
nextSibling 
1 
Element: 
<book> 
I 4 个 book 元 
素 结 点 介 互 
previousSibling 间 为 同胞 
乡 由 
Element: 
<book> 
lastChild Blement 
<book> 
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与 XML DOM 不 同 ,SAX 提供 的 访问 模式 是 一 种 顺序 模式 ,这 是 一 种 快速 读 写 XML 
数据 的 方式 。 当 使 用 SAX 分 析 器 对 XML 文档 进行 分 析 时 ,会 触发 一 系列 事件 ,并 激活 相 
应 的 事件 处 理 函数 ,应 用 程序 通过 这 些 事 件 处 理 函 数 实现 对 XML 文档 的 访问 ,因而 SAX 
接口 也 被 称 作 事 件 驱 动 接口 。 

XML DOM 和 SAX 接口 实现 过 程 中 分 别 侧 重 于 不 同 的 方面 ,二 者 各 有 长 短 , 分 别 满足 
了 不 同 的 应 用 需求 。 

DOM 树 所 提供 的 随机 访问 方式 给 应 用 程序 的 开发 带 来 了 很 大 的 灵活 性 , 它 可 以 任意 
地 控制 整个 XML 文档 中 的 内 容 。 然 而 ,由 于 DOM 分 析 器 把 整个 XML 文档 转化 成 DOM 
树 放 在 了 内 存 中 ,因此 , 当 文 档 比较 大 或 者 结构 比较 复杂 时 ,对 内 存 的 需求 就 比较 高 。 而 且 ， 
对 于 结构 复杂 的 树 的 遍历 也 是 一 项 耗 时 的 操作 。 所 以 ,XML 分 析 器 对 机 器 性 能 的 要 求 比 
较 高 ,实现 效率 不 十 分 理想 。 不 过 ,由 于 XML 分 析 器 所 采用 的 树 结构 的 思想 与 XML 文档 
的 结构 相 吻 合 ,同时 鉴于 随机 访问 所 带 来 的 方便 ,因此 ,DOM 分 析 器 得 到 了 广泛 的 应 用 。 

SAX 分 析 器 在 对 XML 文档 进行 分 析 时 ,会 触发 一 系列 的 事件 ,由 于 事件 触发 本 身 是 有 
时 序 性 的 ,因此 ,SAX 提供 的 是 一 种 顺序 访问 机 制 ,对 于 已 经 分 析 过 的 部 分 ,不 能 再 倒 回 去 
重新 处 理 。SAX 之 所 以 被 叫做 简单 应 用 程序 接口 ,是 因为 SAX 分 析 器 只 做 了 一 些 简单 的 
工作 ,大 部 分 工作 还 要 由 应 用 程序 自己 去 做 。 也 就 是 说 ,SAX 分 析 器 在 实现 时 , 它 只 是 顺序 
地 检查 XML 文档 中 的 字 节 流 ,判断 当前 字 节 是 XML 语法 中 的 哪 一 部 分 、 是 否 符合 XML 
语法 ,然后 再 触发 相应 的 事件 ,而 事件 处 理 函数 本 身 则 要 由 应 用 程序 自己 来 实现 。 同 DOM 
分 析 器 相 比 ,SAX 分 析 器 缺乏 灵活 性 。 然 而 ,由 于 SAX 分 析 器 实现 简单 ,对 内 存 要 求 比较 
低 ,实现 效率 比较 高 ,对 于 那些 只 需要 访问 XML 文档 中 的 数据 而 不 对 文档 进行 更 改 的 应 用 
程序 来 说 ,SAX 分 析 器 更 为 合适 。 

无 论 是 DOM 接口 还 是 SAX 接口 ,都 各 有 其 优 缺 点 。 也 正 是 如 此 ,它们 将 长 期 并 存 下 
去 ,在 不 同 的 应 用 中 发 挥 不 同 的 作用 。 限 于 篇 幅 , 本 节 仅 介绍 广泛 使 用 的 DOM 接口 的 编程 
应 用 。 有 兴趣 的 读者 可 参阅 SAX 接口 相关 资料 。 


5.7.2 XML DOM 对 象 

在 XML DOM 接口 规范 中 ,有 4 个 基本 的 XML DOM 对 象 , 即 Document( 文 档 )、Node 
( 结 点 )、NodeList( 结 点 列表 ) 和 NamedNodeMap( 命 名 结 点 映射 ) 。 

1. Document 对 象 

Document 对 象 代表 了 整个 XML 文档 ,因此 , 它 是 整 棵 DOM 树 的 根 ,提供 了 对 文档 中 
的 数据 进行 访问 和 操作 的 和 人口。 通过 Document 结 点 ,可 以 访问 到 文档 中 的 其 他 结 点 ,如 处 


理 指令 ,注释 ,文档 类 型 以 及 XML 文档 的 根 元 素 结 点 ,等 等 。 
创建 Document 对 象 的 语法 格式 为 : 


JavaScript / JScript: 

//MSZML2.0 版 本 ,支持 DTD 的 处 理 

var doc = new ActiveXObject("Microsoft. XMLDOM" ) 
//MSXML3.0 版 本 ,支持 DTD、XSD 的 处 理 

var doc = new ActiveXObject("Msxml2.DOMDocument. 3.0") 
VB Script: 


Dim docSet doc = Create0bJject("Microsoft. XMLDOM" ) 
We: 在 蚂 中 通过 [工程 ]|[ 引 用 ] 选 择 Microsoft XML 6.0(msxm16.d11) 
Dim doc Rs New MSXML2. DOMDocument60 “采用 XML 接口 6.0 版 本 
xmlDoc.async = False 
xmlDoc. Load App. Path & "\books. xml” ' 将 XML 文 档 加 载 到 Doc 对 象 中 
If (xmlDoc. parseError. errorCode <> 0) Then 

MsgBox( "You have error " & xmlDoc. parseError. reason) 
Else 

MsgBox doc. childNodes(0). nodeName ' 显 示 文 档 中 第 一 个 结 点 的 名 称 
End If 
Set doc = Nothing 
C#: 
using System. Xml; 


xmlDocument doc = new XmlDocument( ); 


由 此 可 见 ,可 以 在 各 种 应 用 程序 中 使 用 DOM 接口 ,无 论 是 客户 端 还 是 服务 器 端 。 在 
ASP. NET 中 可 以 使 用 XmlDocument 类 实现 对 Document 结 点 的 各 种 操作 。 在 这 里 仅 讨 
论 通过 JavaScript 进行 XML DOM 编程 。 
Document 对 象 的 主要 属性 和 方法 分 别 如 表 5-9 和 表 5-10 所 示 。 表 格 中 IE、F、O、W3C 
分 别 代表 浏览 器 Internet Explorer、Firefox、Opera 和 W3C 标准 ,表示 是 否 支持 该 属性 或 方 
法 、 从 什么 版 本 开始 支持 。 


表 5-9 Document 对 象 主要 属性 


属 性 描 述 IE F O WwW3Cc 
async async 属性 可 规定 XML 文件 的 下 载 是 否 应 当 被 同步 处 理 ”5 1.5 9 No 
childNodes 返回 属于 文档 的 子 结 点 的 结 点 列表 5 “1 9 Yes 
doctype 返回 与 文档 相关 的 文档 类 型 声明 (DTD) 6 1 9 Yes 
documentElement 返回 文档 的 根 结 点 5 1 9 Yes 
documentURI 设置 或 返回 文档 的 位 置 No 1 9 Yes 
firstChild 返回 文档 的 首 个 子 结 点 5 1 9 Yes 
lastChild 返回 文档 的 最 后 一 个 子 结 点 | 9 Yes 
nodeName 依据 结 点 的 类 型 返回 其 名 称 5 9 Yes 
nodeType 返回 某 个 结 点 的 结 点 类 型 5 9 Yes 
nodeValue 根据 结 点 的 类 型 来 设置 或 返回 某 个 结 点 的 值 5 | 9 Yes 
text 返回 某 个 结 点 及 其 后 代 的 文本 ( 仅 用 于 IE) 5 No No No 
xml 返回 某 个 结 点 及 其 后 代 的 XML 文档 内 容 ( 仅 用 于 IE) 5 No No No 

表 5-10 ”Document 对 象 主要 方法 

方 法 描 述 IE F 0O Wa3c 
createAttributeCname) 创建 一 个 拥有 指定 名 称 的 属性 结 点 ,并 返回 新 的 Attr 对 象 6 1 9 Yes 
createCDATA -Section() 创建 一 个 CDATA 区 段 结 点 5 1 9 Yes 
createComment() 创建 一 个 注释 结 点 6 1 9 Yes 
createElement() 创建 一 个 元 素 结 点 5 1 9 Yes 
createElementNS() 创建 一 个 带 有 指定 名 称 空 间 的 元 素 结 点 No 1 9 Yes 
createTextNode() 创建 一 个 文本 结 点 5 1 9 Yes 
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续 表 

方 法 描 述 IE O Wa3c 
getElementById(id) 返回 带 有 给 定 ID 属性 值 的 元 素 。 如 果 不 存在 , 则 返回 null 5 9 Yes 
getElementsBy- 返回 一 个 带 有 指定 名 称 的 所 有 元 素 的 结 点 列表 5 9 Yes 
TagName() 
renameNode() 重 命名 一 个 元 素 或 者 属性 结 点 No Yes 
load( 文 件 名 ) 加 载 一 个 XML 文档 
loadxml("XML 文档 ”将 存储 在 字符 串 中 的 XML 文档 内 容 加 载 为 document 对 象 
内 容 ") 
save( 文 件 名 ) 保存 到 一 个 XML 文档 

2. Node 对 象 


Node 对 象 在 整个 DOM 树 中 具有 举足轻重 的 地 位 。 在 DOM 树 中 ,Node 对 象 代表 了 


树 中 的 一 个 结 点 ,如 图 5-18 所 示 。 


XML 文档 中 的 每 个 成 分 都 是 一 个 Node 对 象 。 从 Node 对 象 继承 过 来 的 对 象 有 
Document、Element、Attribute、Text、Comment 等 ,这 些 从 Node 对 象 继 承 过 来 的 子 对 象 类 


型 如 表 5-11 所 示 。 


注意 : 尽管 所 有 的 对 象 都 继承 了 用 以 处 理子 类 结 点 或 父 类 结 点 的 结 点 属性 或 结 点 对 
象 , 但 是 并 不 是 所 有 的 对 象 都 包含 子 类 或 是 父 类 。 例 如 文本 结 点 中 可 能 不 包含 子 类 ,所 以 将 


子 类 结 点 添加 到 文本 结 点 中 可 能 会 导致 一 个 DOM 错误 。 
Node 对 象 的 主要 属性 和 方法 如 表 5-12 和 表 5-13 所 示 。 


parent 全 


Node Object 
nodeType=Element 
nodeName=person 

nodeValue=null 
hasChild Nodes=true 


previousSibling 


nextSibling 


firstChild . 
_ attributes 
ChildNodes 
lastChild 


NodeList 


图 5-18 典型 的 Node 对 象 及 其 相互 关系 


第 5 章 
表 5-11 结 点 对 象 的 类 型 
结 点 对 象 类 型 描 述 子 对 象 
Document 代表 整个 文件 对 象 (DOM 树 根 结 点 ) Element( 至 多 1 个 ), ProcessingInstruction， 
Comment, Document Type 
DocumentFragment ”轻型 文件 对 象 (允许 嵌入 另 一 部 分 文档 ) Element， ProcessingInstruction, Comment, 
Text ,CDATASection ,EntityReference 
Document Type 为 文档 定义 的 实体 列表 对 象 无 
EntityReference 一 个 实体 参数 对 象 Element， ProcessingInstruction, Comment, 
Text ,CDATASection ,EntityReference 
Element 代表 元 素 结 点 对 象 Element， Text, Comment, Processing- 
Instruction,CDATASection ,EntityReference 
Attr 代表 一 个 属性 对 象 (属性 与 其 他 结 点 类 型 不 Text ,EntityReference 
同 ,它们 没有 父 结 点 ) 
ProcessingInstruction ”处 理 指令 对 象 无 
Comment 代表 注释 对 象 无 
Text 元 素 中 的 或 属性 中 的 文本 内 容 ( 字 符 数据 ) 无 
CDATASection 一 块 包含 字符 的 文本 区 ,这 里 的 字符 也 可 以 无 
是 标记 
Entity 代表 实体 对 象 Element, ProcessingInstruction, Comment, 
Text ,CDATASection ,EntityReference 
Notation 在 DTD 中 声明 的 notation 符号 对 象 无 
表 5-12 结 点 对 象 的 主要 属性 
属 性 描 述 IE F O Wasc 
baseURI 返回 一 个 结 点 的 绝对 基准 URI No 1 No Yes 
childNodes 返回 一 个 结 点 的 子 结 点 的 结 点 列表 5 1 9 Yes 
firstChild 返回 一 个 结 点 的 第 一 个 子 结 点 5 1 9 Yes 
lastChild 返回 一 个 结 点 的 最 后 一 个 子 结 点 5 1 9 Yes 
localName 返回 一 个 结 点 的 本 地 名 称 No 1 9 Yes 
namespaceURI 返回 一 个 结 点 的 名 称 空间 的 URI No 1 9 Yes 
nextSibling 返回 上 一 个 同胞 结 点 5 9 Yes 
nodeName 返回 指定 结 点 类 型 的 结 点 名 称 5 1 9 Yes 
nodeType 返回 结 点 类 型 5 1 9 Yes 
nodeValue 设置 或 返回 指定 结 点 类 型 的 结 点 值 5 1 9 Yes 
ownerDocument ”返回 结 点 的 根 元 素 ( 文 档 对 象 ) 5 1 9 Yes 
parentNode 返回 一 个 结 点 的 父 结 点 5 注 9 Yes 
prefix 设置 或 返回 一 个 结 点 的 名 称 空间 前 级 No 出 9 Yes 
previousSibling ”返回 上 一 个 同胞 结 点 5 1 9 Yes 
textContent 设置 或 返回 当前 结 点 及 其 子 结 点 的 文本 内 容 No 1 No Yes 
text 返回 当前 结 点 及 其 子 结 点 的 文本 。 仅 下 支持 5 No No No 
xml 返回 当前 结 点 及 其 子 结 点 的 XML 文档 内 容 。 仅 正 支 持 5 No No 
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表 5-13 结 点 对 象 主要 方法 
方 法 描 述 IE F O WwW3c 
appendChild() 将 一 个 新 的 子 结 点 添加 到 一 个 结 点 中 的 子 类 结 点 5 1 9 Yes 
列表 末尾 
cloneNode() 克隆 一 个 结 点 5 1 9 Yes 
compareDocumentPosition() 比较 两 个 结 点 的 文档 位 置 No 1 No Yes 
hasAttributes() 如 果 结 点 包含 属性 , 则 返回 true; 否则 返回 false 5 » 9 Yes 
hasChildNodes() 如 果 一 个 结 点 包含 子 结 点 则 返回 true, 否则 返 9 g Yes 
回 false 
insertBefore() 在 当前 子 结 点 之 前 插入 一 个 新 的 子 结 点 5 1 9 Yes 
isEqualNode() 检验 两 个 结 点 是 否 相等 No No No Yes 
isSameNode() 检验 两 个 结 点 是 否 相 同 No 1 No Yes 
removeChild() 删除 一 个 子 结 点 5 1 9 Yes 


replaceChild() 替换 一 个 子 结 点 5 1 9 Yes 


下 面 列 出 了 从 Node 对 象 继承 过 来 的 对 象 的 相关 属性 和 方法 。 

1) Element 对 象 

Element 对 象 表示 一 个 XML 文档 中 的 某 个 元 素 。 元 素 可 包含 属性 和 文本 。 假 如 某 个 
元 素 含有 文本 , 则 此 文本 由 一 个 文本 结 点 来 代表 。 文 本 永远 被 存储 于 文本 结 点 中 。 例 如 在 
二 year 之 2005 达 /year 中 ,其 中 year 为 一 个 元 素 结 点 ,此 结 点 之 下 存在 一 个 文本 结 点 ,其 中 
含有 文本 2005。 由 于 元 素 对 象 也 是 一 种 Node, 因 此 它 继承 了 Node 对 象 的 属性 和 方法 。 
表 5-14 列 出 了 Element 对 象 除了 继承 Node 对 象 的 属性 和 方法 外 新 增 的 属性 和 方法 。 


表 5-14 Element 对 象 部 分 属性 和 方法 


属 性 描 述 IE F O Wac 
attributes 可 返回 元 素 的 属性 的 一 个 NamedNodeMap 5 1 9 Yes 
schemaTypeinfo 可 返回 与 元 素 相 关联 的 类 型 信息 No Yes 
tagName 可 返回 元 素 的 名 称 5 1 9 Yes 

方 法 描 述 正 F O W3C 
getAttribute() 返回 某 个 属性 的 值 5 1 9 Yes 
getAttributeNS() 通过 名 称 空间 返回 某 个 属性 的 值 No 1 9 Yes 
getAttributeNode() 以 一 个 Attribute 对 象 返回 一 个 属性 结 点 5 ¥Y 9 Yes 
getAttributeNodeNS() 通过 名 称 空间 返回 一 个 属性 结 点 对 象 No 9 Yes 
getElementsByTagName() 返回 匹配 元 素 结 点 以 及 它们 的 子 结 点 的 NodeList 5 9 Yes 
getElementsByTagNameNS() ie 同和 条 作风 全 全 全 全 条 全 No 1 9 Yes 
hasAttribute() 返回 某 元 素 是 否 拥 有 匹配 某 个 指定 名 称 的 属性 5 1 9 Yes 
hasAttributeNS() 返回 某 元 素 是 否 拥有 匹配 某 个 指定 名 称 和 名 称 空 No 1 9 Yes 

间 的 属性 
hasChildNodes() 返回 元 素 是 否 拥有 任何 子 结 点 5 1 9 Yes 
removeAttribute() 删除 某 个 指定 的 属性 5 1 9 Yes 
removeAttributeNS() 删除 某 个 指定 的 带 有 某 个 名 称 空间 的 属性 No 1 9 Yes 
removeAttributeNode() 删除 某 个 指定 的 属性 结 点 5 1 9 Yes 
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续 表 
方 法 描 述 亚 F O Ww3c 

setUserData ( key，data， 把 某 个 对 象 关联 到 元 素 上 的 某 个 键 No Yes 
handler) 
setAttribute() 添加 一 个 新 属性 5 1 9 Yes 
setAttributeNS() 通过 名 称 空间 添加 一 个 新 属性 间 9 Yes 
setAttributeNode() 添加 一 个 新 的 属性 结 点 5 1 9 Yes 

2) Attr 对 象 

Attr 对 象 表 示 某 个 Element 对 象 的 一 个 属性 。 属 性 的 容许 值 通常 被 定义 在 某 个 
DTD 中 。 


由 于 Attr 对 象 也 是 一 种 结 点 ,因此 它 可 继承 Node 对 象 的 属性 和 方法 。 不 过 属性 无 法 
拥有 父 结 点 ,同时 属性 也 不 被 认为 是 元 素 的 子 结 点 ,对 于 许多 Node 对 象 的 属性 来 说 都 将 返 
回 null。 表 5-15 列 出 了 Attr 对 象 除了 继承 Node 对 象 的 属性 外 新 增 的 属性 。 


表 5-15 Attr 对 象 的 部 分 属性 


属 性 描 述 IE F O wac 


name 返回 属性 的 名 称 5 1 9 YES 
specified 。 如 果 属 性 值 被 设置 在 文档 中 , 则 返回 true, 如 果 其 默认 值 被 5 1 9 YES 
设置 在 某 个 DTD/SCHEMA 中 , 则 返回 false 
value 设置 或 返回 属性 的 值 5 1 9 YES 
3) Text 对 象 


Text 对 象 表示 元 素 或 属性 的 文本 内 容 。Text 对 象 的 部 分 属性 和 方法 如 表 5-16 所 示 。 
表 5-16 Text 对 象 的 部 分 属性 和 方法 
属 性 描 述 IE F O W3C 


data 设置 或 返回 元 素 或 属性 的 文本 6 和 9 Yes 
isElementContentWhitespace ”如果 文本 结 点 包含 空白 字符 内 容 , 则 返回 true，No No No Yes 
否则 返回 false 


length 返回 元 素 或 属性 的 文本 长 度 6 下 9 Yes 

wholeText 以 文档 中 的 顺序 从 此 结 点 返回 相 邻 文本 结 点 的 No No No Yes 
所 有 文本 

方 法 描 述 IE F O W3C 

appendData() 向 结 点 追加 数据 6 1 9 Yes 

deleteData() 从 结 点 删除 数据 6 1 9 Yes 

insertData() 向 结 点 中 插入 数据 6 | 9 Yes 

replaceData() 替换 结 点 中 的 数据 6 1 9 Yes 

replaceWholeText(text) 使 用 指定 的 文本 来 蔡 换 此 结 点 以 及 所 有 相 邻 的 ”No No No Yes 
文本 结 点 

splitText() 在 指定 的 偏 移 处 将 此 结 点 拆 分 为 两 个 结 点 , 同 6 1 9 Yes 


时 返回 包含 偏 移 处 之 后 的 文本 的 新 结 点 


substringData() 从 结 点 提取 数据 6 1 9 Yes 


243 


244 | 
开发 技术 (第 2 版 ) 


4) CDATASection 对 象 和 Comment 对 象 

CDATASection 对 象 表示 某 个 文档 中 的 CDATA 区 段 。CDATA 区 段 包含 了 不 会 被 解 
析 器 解析 的 文本 。 一 个 CDATA 区 段 中 的 标签 不 会 被 视 为 标记 ,同时 实体 也 不 会 被 展开 。 
主要 的 目的 是 为 了 包含 诸如 XML 片段 之 类 的 材料 ,而 无 须 转 义 所 有 的 分 隔 符 。 在 一 个 
CDATA 中 唯一 被 识别 的 分 隔 符 是 "]] 之 ", 它 可 标示 CDATA 区 段 的 结束 。CDATA 区 自 
不 能 进行 嵌 套 。Comment 对 象 表示 文档 中 注释 结 点 的 内 容 。CDATASection 对 象 和 
Comment 对 象 的 属性 和 方法 相同 ,如 表 5-17 所 示 。 

表 5-17 CDATASection 对 象 的 部 分 属性 和 方法 
属 性 描 ” 述 IE F O Wi3C 


data 设置 或 返回 此 结 点 的 文本 6 1 No Yes 
length 返回 CDATA 区 段 的 长 度 / 可 返回 此 结 点 的 文本 的 长 度 6 1 No Yes 
方 ” 法 描 述 IE F O W3C 
appendData() 向 结 点 追加 数据 6 1 No Yes 
deleteData() 从 结 点 删除 数据 6 1 No Yes 
insertData() 向 结 点 中 插入 数据 6 1 No Yes 
replaceData() 替换 结 点 中 的 数据 6 No Yes 
splitText() 把 CDATA 分 拆 为 两 个 结 点 6 1 No 
substringData() ”从 结 点 提取 数据 6 ) No Yes 


5) DocumentType 文档 类 型 对 象 
每 个 文档 都 包含 一 个 DOCTYPE 属性 ,该 属性 值 可 以 是 一 个 空 值 或 是 一 个 文档 类 型 
DocumentType 对 象 。DocumentType 对 象 提 供 了 一 个 用 于 定义 XML 文档 的 实体 对 象 。 
DocumentType 对 象 属性 如 表 5-18 所 示 。 
表 5-18 DocumentType 对 象 属性 


属 性 描 述 IE F O WwW3c 


entities 返回 一 个 包含 DTD 声明 实体 的 NamedNodeMap[ 指 定 结 6 No 9 Yes 
点 映射 ] 

internalSubset ”以 字符 串 的 形式 返回 内 部 DTD No No No Yes 

name 返回 DTD 名 称 6 1 9 Yes 

notations 返回 一 个 包含 DTD 声明 符号 的 NamedNodeMap[ 指 定 结 6 No 9 Yes 
点 映射 ] 

systemld 返回 用 于 确认 外 部 DTD 的 系统 No 1 9 Yes 


6) parseError 对 象 

微软 的 parseError 对 象 可 被 用 来 从 微软 的 XML 解析 器 中 取 回 错误 信息 。 在 试图 打开 
一 个 XML 文档 时 ,就 可 能 发 生 一 个 解析 器 错误 (parser-error) 。 通 过 parseError 对 象 可 取 
回 错误 代码 .引起 错误 的 行 ,等 等 。parseError 对 象 不 属于 W3C DOM 标准 ,其 属性 如 表 5-19 
所 示 。 
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表 5-19 parseError 对 象 的 属性 
属 性 描 述 
errorCode 返回 一 个 长 整数 (long integer) 型 错误 代码 
reason 返回 包含 错误 原因 的 字符 串 
line 返回 一 个 指明 错误 行 数 的 长 整数 
linepos 返回 一 个 指明 错误 位 于 哪个 行 位 置 的 一 个 长 整数 
STCText 返回 错误 所 在 行 的 一 个 字符 串 
url 返回 指向 已 加 载 文件 的 URI 
filepos 返回 指明 错误 所 在 文件 中 的 位 置 的 一 个 长 整数 


ProcessingInstruction、DocumentImplementation 以 及 其 他 对 象 由 于 不 常用 ,此 处 略 。 

3. NodeList 对 象 

NodeList 对 象 是 一 个 结 点 的 集合 , 它 包含 了 某 个 结 点 中 的 所 有 子 结 点 对 象 ,可 用 于 表 
示 有 顺序 关系 的 一 组 结 点 (例如 某 个 结 点 的 子 结 点 序列 )。 可 用 GetNodeByName 方法 返回 
结 点 的 值 。 我 们 可 通过 结 点 列表 中 的 结 点 索引 号 来 访问 列表 中 的 结 点 (索引 号 由 0 开始 )。 
结 点 列表 可 保持 其 自身 的 更 新 。 如 果 结 点 列表 或 XML 文档 中 的 某 个 元 素 被 删除 或 添加 ， 
列表 也 会 被 自动 更 新 。 在 一 个 结 点 列表 中 , 结 点 被 返回 的 顺序 与 它们 在 XML 被 规定 的 顺 
序 相 同 。NodeList 对 象 的 属性 length 可 返回 某 个 结 点 列表 中 的 结 点 数目 ,其 方法 item 可 
返回 结 点 列表 中 处 于 某 个 指定 的 索引 号 的 结 点 。 

4. NamedNodeMap 对 象 

NamedNodeMap 对 象 也 是 一 个 结 点 的 集合 ,利用 该 对 象 可 建立 结 点 名 和 结 点 之 间 的 一 
一 映射 关系 ,从 而 利用 结 点 名 可 以 直接 访问 特定 的 结 点 。 

NamedNodeMap 对 象 类 似 于 NodeList 对 象 ,主要 区 别 是 : NamedNodeMap 通过 名 称 
来 描述 结 点 ,而 不 是 通过 序数 索引 。 另 一 个 显著 区 别 正如 图 5-18 所 示 , NamedNodeList 只 
应 用 于 属性 。NamedNodeList 也 只 有 一 个 返回 结 点 数量 的 length 属性 ,而 方法 如 表 5-20 
所 示 。 


表 5-20 ”NamedNodeMap 对 象 的 方法 


方 法 描 述 IE F O W3C 
getNamedItem() 可 返回 指定 的 结 点 (通过 名 称 ) 5 1 9 Yes 
getNamedItemNS() 可 返回 指定 的 结 点 (通过 名 称 和 名 称 空间 ) 9 Yes 
item() 可 返回 处 于 指定 索引 号 的 结 点 5 1 9 Yes 
removeNamedItem() 可 删除 指定 的 结 点 (根据 名 称 ) 6 和 9 Yes 
removeNamedItemNS() 可 删除 指定 的 结 点 (根据 名 称 和 名 称 空间 ) 9 Yes 
setNamedItem() 设置 指定 的 结 点 (根据 名 称 ) 9 Yes 
setNamedItemNS() 设置 指定 的 结 点 (通过 名 称 和 名 称 空间 ) 9 Yes 


5.7.3 XML DOM 编程 实例 


XML DOM 所 包含 的 内 容 很 多 ,有 兴趣 的 读者 可 参阅 http://www. w3school. com. 
cn/ xmldom/index. asp 和 http://msdn. microsoft. com/library/chs/default. asp? url=/ 
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library/CHS/cpguide/html/cpconXMLDocumentObjectModelDOM. asp 获取 详细 资料 。 
为 引导 读者 迅速 入 门 ,下 面 我 们 通过 具体 的 带 有 详细 注解 的 例子 来 说 明 怎 样 使 用 XML 
DOM 进行 对 XML 文档 的 操作 。 

【 例 5.19】 首先 建立 一 个 JavaScript 文件 ex_5_19. js, 用 于 创建 Document 对 象 。 内 


容 如 下 : 
function loadXMLDoc(dname) { // 创 建 XML DOM Document 对 象 xmlDoc 
var xmlDoc; 
证 (window. ActiveXObject) // 针对 下 浏览 器 


xmlDoc = new ActiveXObject("Microsoft. XMLDOM" ) ; 
// 针对 Mozilla, Firefox，Opera 等 浏览 器 
else if (document. implementation && document. implementation. createDocument) 
xmlDoc = document. implementation. createDocument("","", null); 
else 
alert( 'Your browser cannot handle this script'); 
xmlDoc. async = false; 


xmlDoc. load( dname) ; // 加 载 RE 文档 到 Document 对 象 

If (xmlDoc. parseError. errorCode <> 0) alert( ("You have error:" & xmlDoc. parseError. reason)) 
return(xmlDoc); 

} 


针对 例 5. 18 中 的 ex_5_18. xml 文档 ,下 列 代码 用 XML DOM 实现 了 对 它 的 各 种 操作 ， 
请 仔细 阅读 并 理解 代码 含义 。 


< html >< head > 
< script type = "text/javascript" src = "loadxmldoc. js"></script > 
</head>< body> 
< script type = "text/javascript"> 
// 确 认 最 后 一 个 子 结 点 为 元 素 结 点 
function get_lastchild(n){ 
Var x=n. lastChild; 

while (x.nodeType! = 1){ 

x= Xx.previousSibling; } 


return x; 

} 

xmlDoc = loadXMLDoc( "books. xm1" ); // 装 入 books. xml 文档 内 容 到 内 存 
var root = xmlDoc. documentElement; // 选 择 XML 文档 根 结 点 


document. write("< h2 > 根 结 点 : ”+ root. nodeName + "</h2 >"); 


//1. 返 回 第 二 个 book 元 素 结 点 中 的 price 的 文本 值 


var bookNode = root.childNodes[1]; // 得 到 根 结 点 下 的 第 二 个 book 元 素 结 点 

var priceNode = bookNode. childNodes[3]; // 得 到 book 结 点 下 的 price 子 结 点 ,处 于 第 
//4 个 位 置 .从 0 开始 计数 

var textNode = priceNode.childNodes[0]; // 得 到 price 元 素 的 文本 结 点 

var textValue = textNode.nodeValue; // 得 到 price 元 素 的 文本 结 点 值 


document. write(textValue+ "< br/>") ; // 输 出 文本 结 点 值 
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//2. 如 何 遍 历 BT 文档 
var x = xmlDoc. getElementsByTagName( 'book'); // 返 回 所 有 book 元 素 的 结 点 集合 
for(i=0;i<x.length;i++) { // 对 每 一 个 book 元 素 循 环 


Var bookChildNodeList = x[il].childNodes; 
document. write(" 第 " + i+ "个 book 结 点 下 包含 的 元 素 : "); 
for(j=0;j<bookChildNodeList. length;j++) { // 对 book 结 点 下 的 各 个 子 元 素 循环 
var elNode = bookChildNodeList. item(j); 


var textNode = elNode.childNodes[0]; // 得 到 title 元 素 的 文本 结 点 
var textValue = textNode. nodeValue; // 得 到 title 元 素 的 文本 结 点 值 
document. write(elNode. nodeName +":"+textValue+" ; " ); 

} 


document. write("< br/>"); 


//3. 获取 XML 文 档 中 的 所 有 书 名 

var x = xmlDoc. getElementsByTagName( 'title'); // 得 到 所 有 title 元 素 对 象 

for (i=0;i<x.length;i++) { 
document, write(x[i].childNodes[0].nodeValue +"<br/>") ”// 对 每 个 title 输 出 内 容 
} 


//4. 获 取 book 结 点 的 属性 category 的 值 的 第 一 种 方法 
Var x = xmlDoc. getElementsByTagName( 'book'); 
for (i=0;i<x.length;i++) { 
document. write(x[i].getAttributel( 'category') + "< br/>"); } 


//5. 获取 book 结 点 的 属性 category 的 值 的 第 二 种 方法 
var X= xmlDoc. getElementsByTagName( 'book'); 
for(i=0;i<x.length;i++) { 
var att = x. item(i).attributes. getNamedItem("category"); 
document. write(att. value + "<br />") 
lB 


//6. 为 book 结 点 设置 一 个 新 的 属性 edition 和 属性 值 
var x= xmlDoc. getElementsByTagName( 'book'); 
for(i=0;i<x.length;it++) { 
x. item(i). setAttribute("edition", "FIRST" ); 
1 
Var x = xmlDoc. getElementsByTagName( "title"); 
for (i=0;i<x.length;i++) { 
// 输 出 book 中 所 有 title 和 edition 值 
document. write(x[i].childNodes[0].nodeValue); 
document. write(" — Edition:" + x[i].parentNode. getAttribute( 'edition') + "<br/>"); 
} 


//7. 修 改 book 结 点 中 category 属性 的 值 , 即 设置 成 新 值 ,然后 删除 属性 值 
Var x= xmlDoc. getElementsByTagName( 'book'); 
for(i=0;i<x.length;i++) { 

x. item(i). setAttribute("category", "BESTSELLER" ); 

} 
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for (i=0;i<x.length;i++) { 
document. write(x[i]. getAttribute( 'category') + "< br/>"); // 输 出 所 有 属性 值 
} 
for(i=0;i<x.length;i++) { 
Y = x.item(i); 
Y. removeRttribute( 'category'); 
) 
for (i=0;i<x.length;i++) { 
document. write(x[i].getAttribute( 'category') + "< br/>"); // 输 出 所 有 category 
属性 值 为 no11 
} 


//8. 删除 末尾 的 < book > 元 素 

document. write( "book 结 点 的 数量 为 :" + xmlDoc. getElementsByTagName( 'book'). length + "<br />"); 
var lastNode = get_lastchild(root); 

Var delNode = root. removeChild( lastNode); 

document. write(" 执 行 removeChild 后 的 book 结 点 数量 :"); 

document. write(xmlDoc. getElementsBYTagName( 'book'). length); 


//9. 编 辑 文本 结 点 内 容 

// 得 到 title 元 素 的 文本 结 点 

var x = xmlDoc. getElementsByTagName( "title")[0].childNodes[0]; 
document. write("< br/>" + x.nodeValue); 

// 从 文本 结 点 中 删除 从 0 开始 的 9 个 字符 ”Everyday Italian ==> Italian 
x. deleteData(0,9); 

// 在 文本 结 点 中 0 位 置 开始 添加 字符 Italian ==> Easy Italian 

x. insertData(0, "Easy "); 

// 蔡 换文 本 内 容 中 从 0 开始 的 8 个 字符 为 Lovable Easy 

x. replaceData(0,8, "Lovable Easy"); 

document. write(" ==> "+x.nodeValue +"<br/>"); // ==> Lovable Easy Italian 


//10. 在 结 点 列表 的 末端 添加 一 个 结 点 (生成 book 的 一 个 子 结 点 ) 
var X= xmlDoc. getElementsByTagName( 'book'); 
Var newel, newtext 
for (i=0;i<x.length;i++) { 
newel = xmlDoc. createElement( 'edition'); 
newtext = xmlDoc. createTextNodel( 'First'); 
newel. appendChild(newtext); 
x[i].appendChild(newel); 
} 


document. write(root.xml + "< br/>"); 


//11. 在 指定 的 现存 结 点 前 添加 一 个 新 的 子 元 素 .增加 一 个 book 结 点 


var newNode = xmlDoc. createElement ("book"); // 新 建 元 素 结 点 book 

var newTitle = xmlDoc. createElement ("title"); // 新 建 元 素 结 点 title 

var newText = xmlDoc. createTextNode( "A Notebook" ); // 新 建文 本 结 点 

newTitle. appendChild(newText); // 形 成 title 元 素 的 文本 结 点 
newNode. appendChild(newTitle); // 形 成 book 结 点 的 子 结 点 
root. insertBefore(newNode, get_lastchild(root) ); // 放 到 DOM 树 末 结 点 之 前 


document. write(root.xml + "< br/>"); 


//12. 替换 结 点 列表 中 的 一 个 结 点 

root. replaceChild(newNode, get_lastchild(root)); 
</script> 

</body></html > 


5.8 XML 文档 的 安全 性 


XML 文档 作为 ASCII 文件 ,已 成 为 Internet 上 的 信息 交换 格式 ,而 与 信息 交换 有 关 的 
一 个 重要 问题 是 安全 。XML 文档 安全 包括 : 

(1) 机 密 性 。 用 于 保证 只 有 预期 的 接收 者 阅读 XML 中 预期 的 部 分 。 要 保证 机 密 性 , 重 
要 的 是 加 密 XML。XML Encryption 是 加 密 XML 的 标准 。 

(2) 完整 性 。 用 于 保证 XML 在 从 源 到 最 终 目的 地 的 传输 过 程 中 不 会 被 改变 。XML 
Signature 标准 允许 发 送 者 在 要 保证 完整 性 的 内 容 后 面 附 加 数字 签名 。 

(3) 真实 性 。 用 于 保证 XML 确实 是 由 声明 发 送 它 的 人 发 送 的 。 随 内 容 一 起 发 送 的 
XML 签名 可 以 帮助 确保 发 送 者 的 身份 。 有 效 载 明 的 接收 者 可 以 使 用 发 送 者 的 公开 密 钥 验 
证 数字 签名 。 如 果 数 字 签名 是 有 效 的 ,身份 就 得 到 了 确认 ,否则 就 不 能 确认 。 

(4) 抗 和 否认 性 。 用 于 保证 发 送 者 不 能 否认 发 送 了 XML。 由 发 送 者 的 私 钥 生成 的 附 在 
XML 上 的 XML 签名 保证 了 发 送 者 的 不 可 否认 性 。 

1. XML 加 密 (Xenc) 

除了 在 传送 XML 文件 时 采用 标准 进行 加 密 , W3C 和 IETF 还 制定 了 一 项 标准 来 对 
XML 文档 中 的 单个 数据 和 部 分 内 容 进行 加 密 。 这 样 ,如 果 一 个 文档 只 是 某 些 敏 感 部 分 需 
要 进行 保护 ,你 就 可 对 它们 单独 进行 加 密 。 对 于 同一 个 文档 中 的 不 同 部 分 用 不 同 的 密 钥 进 
行 加 密 , 你 就 可 以 把 同一 个 XML 文件 发 给 不 同 的 接收 者 ,而 接收 者 只 能 看 见 和 它 相关 的 部 分 。 
一 旦 采用 这 个 方法 对 一 个 XML 文件 进行 加 密 , 在 加 密 部 分 的 首尾 就 会 出 现 两 个 标记 ,表示 该 
文件 是 以 W3C 公布 的 标准 进行 加 密 的 。 真 实 的 标识 名 被 替代 ; 数据 本 身 显示 为 一 连 串 的 密 
码 。 这 个 标准 使 XML 数据 提供 者 可 以 根据 用 户 的 不 同 对 内 容 进行 颗粒 化 的 控制 。 而 且 由 于 
只 加 密 重要 敏感 数据 而 不 加 密 整个 文件 ,整个 文件 仍 可 以 被 XML 处 理 器 识别 和 处 理 。 

2. XML 签名 (XML-SIG) 


XML 签名 和 XML 加 密 紧密 相关 。 和 安全 认证 签名 相似 ,XML 也 是 用 于 确保 XML 文 
件 内 容 没 有 被 算 改 。 为 了 适应 各 种 文件 系统 和 处 理 器 在 版 式 上 的 不 同 ,XML 签名 采用 了 
标准 化 模式 。 这 就 使 得 XML 签名 可 以 适应 XML 文件 可 能 遇 到 的 各 种 环境 。 当 对 内 容 进 
行 签名 时 ,标准 化 模式 使 用 文件 里 的 数据 和 标识 产生 一 个 独一无二 的 签名 ,忽略 了 一 些 诸 如 
段落 结束 或 者 制 表 符 之 类 的 次 要 信息 。 收 到 一 个 文件 后 ,客户 系统 就 开始 进行 “XML 签名 
解密 转换 ”, 它 通过 辨认 信息 是 在 标识 前 还 是 标识 后 来 区 分 内 容 和 签名 : 内 容 在 标识 后 ,而 
签名 在 标识 前 。 通 过 比较 运算 结果 和 文件 中 的 签名 ,可 以 确认 数据 的 完整 性 。XML 签名 和 
XML 加 密 结合 在 一 起 ,可 以 确保 数据 发 送 和 接收 的 一 致 性 。 

3. XML 安全 相关 开发 工具 

除了 采用 加 密 算 法 外 ,可 以 借助 一 些 相 关 安 全 工具 来 确保 XML 文档 的 安全 性 。 

(1) Apache Security 提供 了 一 个 免费 的 符合 W3C 的 XML 加 密 标准 的 Java 实施 工具 。 

(2) IBM XML Security Suite 包括 3 种 XML 安全 工具 : 认证 ,数据 加 密 、XML 访问 控制 。 

(3) XML Security Library 是 一 个 免费 的 XML 安全 工具 ,用 于 C 程序 员 。 

(4) 商业 工具 如 KeyTools 和 JCSI 等 ,为 XML 文档 提供 安全 性 。 
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(5) 可 利用 微软 . NET 的 System. Security. Cryptography. Xml 命名 空间 所 提供 的 
EncryptedXml 和 SignedXml 类 直接 对 XML 文档 进行 加 密 或 签名 ( 需 添 加 引用 System. 
Xml 命名 空间 )。 有 兴趣 的 读者 可 参阅 http://msdn. microsoft. com/zh-cn/library/vstudio/ 
system. securit. Cryptography. xmlxmldsigxslttranform. aspx 网 站 。 


5.9 XPath、XLink 和 XPointer 简介 


5.9.1 XPath 


当 我 们 采用 XSL 转换 XML 文档 时 需要 处 理 其 中 的 一 部 分 数据 ,那么 应 该 如 何 查 找 和 
定位 XML 文档 中 的 信息 呢 ? 也 就 是 说 在 模板 声明 语句 xsl:template match 王 "" 和 模板 应 
用 语句 xsl:apply-templates select = “中 怎样 确定 这 两 个 引号 中 的 内 容 , 使 得 我 们 能 够 精 
确 地 找到 需要 的 结 点 ? XPath 就 是 一 种 专门 用 来 在 XML 文档 中 查找 信息 的 语言 ,换言之 ， 
如 果 将 XML 文档 看 作 一 个 数据 库 , 则 XPath 就 是 SQL 查询 语言 。 

1. XPath 结 点 的 种 类 

XPath 的 数据 类 型 中 包括 7 种 可 能 的 结 点 形式 : 根 (root)、 元 素 (element)、 属 性 (attribute)、 
名 称 空间 (namespace) ,处理 指 令 (processing instruction) ,注释 (comment) 和 文字 (text)。 

在 XML 文档 中 每 个 元 素 都 有 一 个 对 应 的 元 素 结 点 。 一 个 元 素 结 点 可 以 包含 其 他 的 元 
素 结 点 ,注释 结 点 .处 理 指令 结 点 与 文字 结 点 等 。 每 一 个 元 素 结 点 都 有 一 个 相关 的 名 称 空间 
结 点 集 。 在 XML 文档 中 ,名称 空 间 是 通过 保留 属性 声明 的 ,因此 ,在 XPath 中 ,该 类 结 点 与 
属性 结 点 极为 相似 ,它们 与 父 元 素 之 间 的 关系 是 单 向 的 ,并 且 不 具有 共享 性 。 文 本 结 点 包含 
了 一 组 字符 数据 , 即 CDATA 中 包含 的 字符 。 任 何 一 个 文本 结 点 都 不 会 有 紧邻 的 兄弟 文本 
结 点 ,而 且 文 本 结 点 没有 扩展 名 ,只 能 在 整体 上 对 文本 结 点 进行 操作 。 

2. XPath 轴线 

轴线 是 指 上 下 文 结 点 之 间 的 关系 。XPath 轴线 定义 了 多 种 形式 的 结 点 轴线 ,如 表 5-21 所 示 。 

表 5-21 XPath 的 结 点 轴线 


序号 结 点 轴线 描 述 
1 ancestor 当前 结 点 的 祖先 结 点 ,包括 了 当前 结 点 的 父 结 点 ,直至 根 结 点 
和 ancestor-or-self 当前 结 点 和 当前 结 点 的 祖先 结 点 
3 attribute 当前 结 点 的 属性 
4 child 当前 结 点 的 子 结 点 
5 descendant 当前 结 点 的 后 代 ( 即 子 结 点 , 子 结 点 的 子 结 点 ，…… ) 
6 descendant-or-self ”当前 结 点 及 其 后 代 
7 following 当前 结 点 之 后 的 所 有 结 点 
8 following-sibling 当前 结 点 的 所 有 兄弟 结 点 
9 namespace 当前 结 点 的 名 称 空间 结 点 
10 parent 当前 结 点 的 父 结 点 
11 preceding 当前 结 点 的 所 有 前 结 点 
12 preceding-sibling 当前 结 点 的 所 有 前 兄弟 结 点 


13 self 当前 结 点 


3. 基本 的 XPath 表达 式 及 其 缩写 形式 
XPath 中 最 基本 的 表达 式 及 其 缩写 形式 如 表 5-22 所 示 。 在 实际 应 用 中 就 可 使 用 缩写 形式 。 
表 5-22 ”XPath 的 基本 表达 式 及 其 缩写 形式 实例 


表 达 式 缩写 形式 描 述 

/ 返回 当前 结 点 

Child::SUBJECT SUBJECT 返回 当前 结 点 的 子 结 点 的 
SUBJECT 元 素 

Child:: * # 返回 当前 结 点 的 子 结 点 的 
所 有 元 素 

Descend:: TITLE //TITLE 返回 当前 结 点 的 后 代 的 所 
有 TITLE 元 素 

Child: :text() text() 返回 当前 结 点 的 子 结 点 的 
文本 结 点 

Attribute: :COUNTRY @COUNTRY 返回 当前 结 点 的 COUNTRY 
属性 

Child::SUBJECTVChild: :TITLE SUBJECT/TITLE 返回 当前 结 点 的 SUBJECT 
元 素 的 子 元 素 TITLE 

/Decend: :STUDENTVChild: :NAME /STUDENTVNAME 返回 拥有 父 结 点 STUDENT 
的 所 有 NAME 属性 

Child:: STUDENT[position()=3] ”STUDENT[3] 返回 当前 结 点 的 子 结 点 的 
第 三 个 STUDENT 元 素 

Child :: STUDENT [Attribute :: ”STUDENT[(@COUNTRY=“CN”)] ”返回 当前 结 点 的 子 结 点 属 


COUNTRY=“CN”] 


4. XPath 函数 


性 COUNTRY 的 值 为 
“CN” 的 STUDENT 元 素 


XPath 函数 (又 称谓 词 表达 式 ) 主 要 分 为 4 组 , 即 结 点 集 型 .字符 串 型 数值 型 和 布尔 型 。 


1) 结 点 集 型 


所 谓 结 点 集 就 是 结 点 的 集合 。 在 XSL 中 ,一 个 表达 式 返 回 的 结果 往往 是 一 系列 的 结 
点 。 要 从 结 点 集中 选择 一 个 或 多 个 结 点 时 ,就 需要 使 用 关于 结 点 集 的 函数 ,如 表 5-23 所 示 。 


表 5-23 结 点 集 函 数 


序号 函数 名 (参数 ) 描 述 
1 count(node-set) 返回 结 点 集中 的 结 点 数 
2 id(object) 使 用 id 属性 来 选 出 符合 要 求 的 结 点 
3 last() 返回 XPath 结 点 或 上 下 文大 小 数目 
4 local-name(node-set) 返回 结 点 集中 第 一 个 结 点 的 本 地 名 
5 name(node-set) 返回 结 点 集中 第 一 个 结 点 的 完全 名 称 
6 namespace-uri(node-set) 返回 结 点 集中 第 一 个 结 点 的 名 称 空间 的 URI 
7 position() 返回 当前 结 点 的 位 置 
2) 字符 串 型 


在 XPath 中 ,字符 串 使 用 的 是 Unicode 字符 ,为 了 能 方便 地 操作 字符 串 ,XPath 提供 了 
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大 量 的 字符 串 函 数 ,如 表 5-24 所 示 。 


表 5-24 字符 串 函 数 


序号 函数 名 (参数 ) 描 述 
i Concat(string,string,string * ) 返回 所 有 字符 串 连接 起 来 的 字符 串 
芝 Contains(string, string) 判断 第 二 个 字符 串 是 否 包含 在 第 一 个 字符 串 中 
3 Normalize space(string) 去 掉 字符 串 首尾 空白 部 分 ,并 用 一 个 空格 代替 中 间 连 续 的 空格 
4 Starts-with( string, string) 判断 第 一 个 字符 串 是 否 以 第 二 个 字符 串 开始 
5 String(value) 将 数值 转换 为 字符 串 
6 String-length(string) 返回 字符 串 的 长 度 
人 Substring(string,start,length) 返回 字符 串 从 start 处 开始 长 度 为 length 的 子 串 
8 Substring-after(string,substr) 返回 从 第 一 次 出 现 substr 之 后 到 string 最 后 一 个 字符 的 部 分 
9 Substring-before(string,substr) 返回 从 string 的 第 一 个 字符 开始 到 第 一 次 出 现 substr 的 部 分 
10 Translate(value, strl, str2) 将 value 字符 串 中 的 strl 用 str2 来 代替 
3) 数值 型 


XPath 中 的 数值 型 函数 如 表 5-25 所 示 。 


表 5-25 数值 型 函数 


序号 函数 名 (参数 ) 描 述 
CeilingCvalue) 返回 比 value 值 大 的 最 小 整数 
2 Floor(value) 返回 比 value 值 小 的 最 大 整数 
3 Number(string) 将 字符 串 转化 为 数字 
4 Round(value) 对 参数 进行 四 舍 五 人 
5 Sum(node-set) 返回 结 点 集中 所 有 数值 的 和 
4) 布尔 型 


布尔 值 只 可 能 为 两 个 值 , 即 true 或 false。 在 XSL 中 ,可 以 将 任何 类 型 的 数据 转变 成 布 
尔 值 ,转换 一 般 按 下 面 的 规则 进行 : 

。 如 果 数 值 为 0 则 布尔 值 为 false, 其 余 的 为 true; 

。 空 结 点 集 为 false, 反 之 为 true; 

。 长度 为 0 的 字符 串 布 尔 值 为 false, 其 余 的 为 true。 

XPath 为 我 们 提供 了 以 下 布尔 型 函数 ,如 表 5-26 所 示 。 


表 5-26 布尔 型 函数 


序 号 函数 名 (参数 ) 描 述 
下 Boolean(object) 依据 提供 的 对 象 返回 一 布尔 型 值 
2 Not(object) 求 反 
3 TrueO) 返回 true 
4 False() 返回 false 
5 Lang(string) 判断 上 下 文 结 点 语言 


【 例 5.20】 使 用 Xpath 的 简单 例子 。 其 中 XML 文档 ex_5_20. xml 文件 内 容 为 : 


第 5 章 


<?xml version = "1.0"?> 
<?xml — stylesheet type = "text/xsl" href = "ex 5 20.xsl"?> 
< root> 
<x>green</x> 
<y> 
<x>bluel </x> <x>blue2 </x> 
</y> 
雪 焉 至 
<x>redl</x> <x>red2</x> 
</z> 
<x> green</x> 
</root> 


ex_5_20. xsl 文件 内 容 为 : 


1 <?xml version="1.0"?> 
2 <xsl:stylesheet version="1.0" 
习 xmlns:xsl = "http://www. w3. org/1999/XSL/Transform"> 
<xsl:template match= "root"> 
<xsl:for -each select= "//y" > 
<xsl:value — of select="." />, 
<xsl:if test = "not(position() = last())">,</xsl:if> 
</xsl:for - each> 
</xsl:template > 
10 </xsl:stylesheet > 


4 
5 
6 
7 
8 
3 


该 例 中 第 5 行 .第 6 行 和 第 7 行 均 采用 了 XPath 表达 式 , 浏 览 器 输出 结果 为 "bluel 
blue2 ,"。 另 外 在 XML DOM 编程 中 也 可 使 用 XPath 表达 式 ,例如 : 


// 演 示 了 如 何 选取 price 值 大 于 35 的 price 结 点 
xmlDoc. selectNodes("/bookstore/book[price>35]/price") ; 


5.9.2 XLink 


XLink 可 用 来 解决 XML 文档 之 间 的 链接 问题 。 可 以 这 样 来 理解 : 若 一 个 XML 文档 
非常 大 ,可 选择 将 它 拆 分 成 为 多 个 XML 文档 ,分 散 放 在 Web 上 不 同 的 网 络 位 置 ,那么 如 何 
处 理 这 种 情况 ? 先 看 下 面 这 个 例子 。 

【 例 5.21】 建 有 超 链接 的 XML 文档 ex_5_21. xml: 


<?xml version = "1.0"?> 
< bookstore xmlns:xlink = "http://www. w3. org. sixxs. org/1999/xlink"> 
< book title = "Harry Potter"> 
<description 
xlink:type = "simple" 
xlink:href = "http://book. com. sixxs. org/images/HPotter. gif" 
xlink: show = "new"> 


253 


254 
开发 技术 (第 2 版 ) 


Rs his fifth Year at Hogwarts School of Witchcraft and 
Wizardry approaches，15 — year 一 old Harry Potter is... 
</description> 
</book > 
< book title= "XQuery Kick Start"> 
<description 
xlink:type = "simple" 
xlink:href = "http://book. com. sixxs. org/ images/XQuery. gif" 
xlink: show = "new"> 
XQuery Kick Start delivers a concise introduction to the Xquery 
standard... 
</description> 
</book > 
</bookstore > 


从 例 5. 21 可 以 看 出 ,ex_5_21. xml 文档 中 的 两 本 书 的 封面 图 已 放 到 由 xlink:href 指定 
的 链接 位 置 ,当然 这 里 也 可 改 为 另 一 个 XML 文档 的 名 称 。 

在 进行 XLink 设计 前 必须 先 声 明 一 个 名 称 空 间 。XLink 的 名 称 空间 通常 采用 如 下 的 
URI 定 义 : xmlns:xlink 一 "http://www. w3. org/1999/xlink"。 

定义 好 名 称 空间 后 ,就 可 以 开始 着 手 设 计 XLink 了 。XLink 包含 了 许多 属性 ,常用 的 
属性 如 表 5-27 所 示 。 


表 5-27 XLink 常用 属性 


序号 属 性 描 述 
1 type 指定 链接 类 型 , 值 可 为 simple 或 者 extended 
2 href URI 链 接 目 标 
a role 链接 目标 的 功能 
4 title 可 人 为 读 取 的 链接 功能 描述 符 
5 actuate ”定义 链接 触发 方式 , 值 可 为 onQuest 或 onLoad 
6 show 定义 链接 目标 资源 被 检索 到 时 其 显示 方式 , 值 可 为 new、replace、embedded 
邓 from 定义 locator 或 resource 元 素 的 role 属性 的 取 值 ,链接 始点 
8 to 定义 locator 或 resource 元 素 的 role 属性 的 取 值 ,链接 终点 


5.9.3 XPointer 


XPointer 用 于 在 资源 内 定位 片段 (fragement) , 它 支 持 在 XML 文档 中 定位 元 素 、 属 性 、 
字符 串 等 内 部 结构 。 例 如 ,我 们 可 以 定位 到 根 元 素 或 者 当前 元 素 的 第 5 个 子 元 素 , 也 可 以 定 
位 到 文档 中 的 某 一 个 位 置 或 两 个 位 置 之 间 的 区 域 。 

XPointer 采用 基于 XSL 转换 中 的 XPath 语言 ,并 在 其 基础 上 进行 了 扩展 。XPointer 
不 再 使 用 XPath 中 的 结 点 这 个 概念 ,而 改 用 位 置 (location), 每 一 个 位 置 可 以 是 结 点 、 点 
(point) 或 范围 (range) 。 点 就 是 XML 文件 内 的 某 个 位 置 ,而 范围 则 是 两 个 点 之 间 的 所 有 文 
档 内 容 。 

XPath 只 能 定位 一 个 结 点 ,而 XPointer 除了 定位 一 个 结 点 外 ,还 可 定位 点 和 范围 ; 通过 
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字符 串 匹 配 定位 资源 片段 ; 在 URI 引用 中 定位 资源 片段 。 例 如 : 

http: //www. xxx. edu. cn/index. html/ #xpointer(/child:: * [position() = 3]) 
表示 在 URI 引用 中 定位 资源 片段 。 通 过 这 种 方式 ,可 以 在 某 个 网 站 中 引用 另 一 个 网 站 的 某 
城市 的 天 气 预 报 ,而 不 需要 访问 那个 网 站 的 关于 天 气 预报 的 数据 库 。 又 如 : 


xlink:href = http://dog. com. org/dogbreeds. xml # XPointer( id( 'Rottweiler')) 


通过 XLink 精确 定位 到 dogbreeds. xml 文档 中 的 "Rottweiler" 的 ID 值 。 
XPointer 中 的 范围 是 由 起 始点 和 结束 点 定义 的 ,形式 如 下 : 
#Xpointer(< locatorElement > to < locatorElament >) 例如 : 


#Xpointer(/dirl/text()/start— point()[position() =1] to /dirl/text()/ 
start ~ point()[position()=5]) 


XPointer 提供 的 语法 则 是 通过 一 系列 扩展 函数 来 实现 的 。XPointer 的 扩展 函数 如 
表 5-28 所 示 。 
表 5-28 XPointer 的 扩展 函数 


序号 函 数 描 述 
1 End-point() ”返回 包含 位 置 终点 的 位 置 集 
2 Here() 返回 包含 指向 当前 元 素 的 XPointer 的 元 素 
3 Start-point() ”返回 包含 位 置 起 点 的 位 置 集 。 例 如 Starrpoint()[position() 一 12] 
4 String-range() 查询 目标 文档 。 例 如 : String-range(//title,"hello" ,2,3)[6] 表示 选择 title 


元 素 中 第 6 次 出 现 的 hello 中 的 从 第 二 个 字符 起 的 连续 3 个 字符 , 即 ell 

5 Unique() 相当 于 count() 二 1。 如 果 位 置 集 包含 在 一 个 条 目 中 , 则 返回 true 

6 Range-to() 查询 某 一 范围 。 例 如 XPointer(id("chapl1")range-to(id("chap2"))) 表示 
定位 范围 是 从 ID 属性 值 为 chapl 到 ID 属性 值 为 chap2 的 范围 


5.10 XML 与 数据 库 


随 着 XML 的 广泛 应 用 ,各 大 数据 库 公 司 都 将 自己 的 产品 重新 设计 ,使 之 能 够 最 大 限度 
地 支持 XML ,如 DB2 Sybase.Oracle .Informix 数据 库 以 及 由 The Connection Factory 开发 
的 XHive、 由 ozone-db. org 开发 的 XML Repository 和 eXcelon 公司 的 eXcelon, 还 有 微软 
公司 的 SQL Server 2005 和 SQL Server 2008 等 。 

微软 于 2000 年 1 月 就 宣布 其 SQL Server 数据 库 对 XML 提供 支持 ,此 后 一 直 致 力 于 
将 XML 技术 同 其 SQL Server 相 集 成 ,以 帮助 建立 下 一 代 高 效 的 基于 Web 的 企业 应 用 。 
该 公司 于 2008 年 推出 的 新 版 本 SQL Server 2008, 是 一 个 完全 支持 XML 的 产品 。 


5.10.1 SOL Server 对 XML 的 支持 
1. SQL Server 2000 对 XML 的 支持 
(1) 使 用 SELECT 语句 中 的 FOR XML 子 句 提取 XML 数据 。 
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例如 : 


select * from Northwind. dbo. customers for xml auto 


在 SELECT 语句 中 运用 FOR XML 子 句 , 它 有 3 种 模式 可 以 以 不 同 的 格式 来 返回 
XML: RAW、AUTO 和 EXPLICIT。RAW 模式 将 结果 中 的 每 个 记录 作为 一 个 普通 的 行 元 
素来 返回 , 它 被 包含 在 一 个 标签 中 ,并 将 每 个 列 的 值 作为 一 个 属性 。AUTO 模式 将 每 个 记 
录 作 为 行 元 素 返 回 ,并 根据 源 表 或 视图 名 称 对 它 的 元 素 进行 命名 。 如 果 查 询 从 一 个 表 返 回 
多 个 列 ,那么 每 个 列 的 值 就 会 被 作为 表 元 素 的 属性 来 返回 。 但 如 果 SELECT 语句 执行 了 合 
并 操作 ,那么 AUTO 模式 就 代表 的 是 子 行 ,它们 作为 元 素 嵌 套 在 父 行 下 。EXPLICIT 模式 
有 几 个 参数 ,可 以 通过 这 些 参 数 来 定义 返回 的 XML 的 样式 。 可 以 为 每 个 元 素 定义 标签 , 明 
确 确 定数 据 是 如 何 嵌 套 的 。FOR XML 语句 使 我 们 不 必 再 返回 一 个 行 记录 集 ,再 在 客户 端 
或 中 间 层 将 它 转换 成 XML 了 。 

(2) 简单 的 HTTP URL 请 求 。 

例如 : 


http://localhost/web?sql = select * from Northwind. dbo.customers for xml auto 


实现 此 功能 需要 在 “开始 ”| “程序 ”| Microsoft SQL Server 上“ 在 IIS 中 配置 SQLXML” 
菜单 所 打开 的 “用 于 SQL Server 的 IIS 虚拟 目录 管理 ”对 话 框 中 进行 配置 。 

要 通过 HTTP 访问 一 个 SQL Server 数据 库 ,首先 在 上 述 对 话 框 中 设置 一 个 虚拟 目录 ， 
这 个 虚拟 目录 在 HTTP 协议 和 一 个 特定 的 数据 库 之 间 提 供 了 一 个 链接 。 在 对 话 框 的 虚拟 
目录 设置 中 指定 虚拟 目录 的 名 称 、 物 理 路 径 、 服 务 器 名 称 数据库 名 称 和 注册 信息 。 一 旦 创 
建 了 一 个 虚拟 目录 ,就 可 通过 一 个 URL 将 查询 发 送 到 数据 库 了 。 假 如 设置 了 一 个 叫做 
Northwind 的 虚拟 目录 ,并 在 浏览 器 中 输入 了 查询 http://localhost/Northwind? sql 一 
SELECTY? * FROM 十 Shippers 十 FOR 二 XML 二 AUTO+&root=Shippers, 它 就 会 返回 相 
应 的 XML 数据。 与 运用 ADO 或 其 他 任何 技术 相 比 ,HTTP 查询 会 让 我 们 更 容易 地 来 访 
问 网 站 或 Web 应 用 程序 的 数据 。 对 于 一 个 简单 的 查询 语句 来 说 ,HTTP 查询 会 很 好 ,但 对 
于 一 个 更 复杂 的 查询 来 说 ,这 种 格式 就 会 变 得 难以 理解 并 很 难 管理 了 。 此 外 这 种 方法 也 不 
安全 ,因为 查询 源 代码 是 暴露 给 用 户 的 。 另 外 一 种 可 选 方法 是 在 HTTP 上 调用 一 个 模板 查 
询 。 一 个 模板 查询 就 是 一 个 包含 SQL 查询 的 XML 文件 。 模 板 作为 文件 保存 在 服务 器 上 。 
因此 ,如 果 你 在 一 个 叫做 GetShippers. xml 的 模板 中 封装 了 Shippers SELECT 查询 ,那么 
URL 查询 的 形式 就 会 是 : http://localhost/Northwind/templates/GetShippers. xml。 模 板 
也 可 以 带 有 参数 , 当 模 板 调用 一 个 存储 过 程 时 ,该 功能 会 很 有 有用。 在 URL 查询 和 模板 查询 
中 ,如 果 想 从 查询 返回 一 个 HTML 页 面 .可 以 指定 一 个 XSLT 样式 表 , 将 它 用 于 XML。 模 
板 查 询 是 读 取 数 据 的 一 个 更 安全 的 方法 , 它 可 以 被 缓存 以 得 到 更 好 的 性 能 。 

(3) OPENXML. 

OPENXML 函数 可 以 让 你 像 操 作 一 个 表 那 样 来 运用 XML 数据 ,可 以 将 它们 转换 成 内 
存 中 的 一 个 行 记 录 集 。 要 运用 OPENXML .首先 要 调用 sp_xml_ preparedocument 存储 过 
程 ,实际 上 , 它 将 XML 解析 成 一 个 数据 树 :并 将 那个 数据 的 句柄 传递 到 OPENXML 函数 。 


然后 就 可 操作 那个 数据 了 ,可 以 进行 查询 ,将 它 插入 到 表 中 等 操作 。OPENXML 函数 带 3 
个 参数 : 用 于 XML 文档 内 部 显示 的 句柄 、 一 个 rowpattern 参数 和 一 个 flags 参数 。 
rowpattern 参数 指定 了 应 该 返回 原始 的 XML 文档 中 的 哪些 结 点 。flags 参数 指定 了 以 属性 
为 中 心 的 映射 (结果 集中 列 名 符合 属性 名 ) 或 以 元 素 为 中 心 的 映射 (结果 集中 列 名 符合 元 素 
名 )。 在 处 理 完 XML 数据 后 ,我 们 可 以 调用 sp_xml_removedocument 将 XML 数据 从 内 存 
中 删除 。 

(4) 通过 SQLXML 得 到 更 多 的 支持 (需要 安装 XML for SQL Server 2000 Web 
Releasel 方 可 使 用 ) 。 

通过 发 布 SQLXML, 微 软 在 SQL Server 中 提供 了 更 多 的 XML 支持 。SQLXML 包含 
updategram 和 XML BulkLoad 功能 。 你 可 以 在 线 下 载 最 新 版 本 的 SQLXML。 可 以 通过 基 
于 XML 的 模板 ,运用 updategram 来 插入 、 更 新 或 删除 表 中 的 数据 。updategram 提供 了 一 
个 方法 ,使 我 们 可 以 直接 从 XML 更 新 SQL Server 数据 ,这 样 就 不 用 从 XML 文档 得 到 数 
据 , 然 后 再 用 记录 集 或 调用 存储 过 程 来 处 理 了 。updategram 只 是 可 以 简单 地 插入 、 更 新 或 
删除 数据 ,如 果 需 要 查看 一 个 值 是 否 存在 或 在 更 新 前 查看 一 些 商 业 规则 ,那么 就 应 该 用 
OPENXML 。 

虽然 可 用 OPENXML 函数 和 updategram 来 插入 数据 ,但 对 于 加 载 大 量 的 XML 数据 
来 说 ,这 两 种 方法 都 不 实用 。 可 用 XML BulkLoad 将 大 量 的 XML 数据 插入 到 SQL Server 
表 中 。 实 际 上 可 用 SQLXML BulkLoad 组 件 来 加 载 数据 ,从 一 个 客户 端 应 用 程序 来 调用 这 
个 组 件 。 在 BulkLoad 组 件 中 ,可 以 指定 是 否 执 行 数据 表 检 查 约束 (check constraint) 、 当 插 
入 数据 时 是 否 应 该 锁定 数据 表 , 等 等 。 

默认 情况 下 ,BulkLoad 不 进行 事务 处 理 ,但 可 指定 所 有 加 载 的 数据 都 是 在 一 个 单独 的 
事务 处 理 过 程 中 ,这 样 就 可 实现 要 么 提交 成 功 ,要 么 回 深 。 如 果 用 了 事务 处 理 , 所 有 的 数据 
在 插入 前 都 会 被 写 进 一 个 临时 的 文件 。 这 就 意味 着 ,你 需要 足够 的 磁盘 空间 来 保存 临时 文 
件 ,而 且 加 载 数据 可 能 会 很 慢 。 但 XML BulkLoad 给 我 们 提供 了 一 个 很 好 的 方法 ,使 我 们 
可 以 将 大 量 的 数据 写 到 SQL Server 中 ; 否则 ,你 就 必须 提取 数据 ,然后 用 另外 的 方法 将 它 
加 载 到 数据 库 中 。 

根据 具体 实现 情况 ,可 以 在 Web 应 用 程序 中 通过 HTTP 和 XSLT 的 XML 查询 来 替 
代 标 准 的 ASP/ADO 数据 访问 ,从 而 得 到 HTML 输出 结果 ,这 种 方法 可 以 极 大 地 提高 
性 能 。 

2. SOL Server 2005 对 XML 的 支持 


在 SQL Server 2005 中 ,FOR XML 功能 新 增 了 根 元 素 和 元 素 名 称 的 新 选项 ,使 用 FOR 
XML 调用 你 可 以 建立 复杂 的 层次 关系 的 能 力 ,和 一 个 新 的 Path 模式 ,你 可 以 定义 将 要 使 用 
XPath 语法 来 提取 XML 结构 。 例 如 : 

SELECT ProductID AS '@ProductID' 

ProductName AS 'ProductName' 


FROM Products 
FOR XML PATH ('Product'), ROOT ('Products') 


返回 结果 为 : 
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<Products> 
< Product ProductID= "1"> 
< ProductName > Widget </ProductName > 
</Product > 
<Product ProductID = "2"> 
< ProductName > Sprocket </ProductName > 
</Product > 
</Products> 


除了 增强 了 SQL Server 2000 中 的 现 有 XML 功能 ,SQL Server 2005 还 添加 了 一 种 新 


的 本 地 xml 数据 类 型 ,此 数据 类 型 能 够 用 于 为 XML 数据 创建 变量 和 列 , 例 如 : 


CREATE TABLE SalesOrders 
(OrderID integer PRIMARY KEY, 
OrderDate datetime, 
CustomerID integer, 

OrderNotes xml) 


可 以 使 用 该 xml 数据 类 型 存储 数据 库 中 的 标记 文档 或 半 结 构 化 数据 。 列 和 变量 可 以 


用 于 非 类 型 XML 和 类 型 XML ,后 者 是 由 XML 架构 定义 (XSD) 架 构 验 证 的 。 开 发 人 员 可 
以 使 用 CREATE XML SCHEMA COLLECTION 语句 为 数据 验证 定义 架构 ,例如 : 


CREATE XML SCHEMA COLLECTION ProductSchema AS 

<?xml version= "1.0" encoding = "UTF - 16"?> 

<xs:schema xmlns:xs = "http://www. w3.org/2001/XMLSchema"> 
<! -— Schema declarations go here -一 > 

</xs:schema> 


创建 架构 集合 后 ,可 以 通过 引用 该 架构 集合 并 使 用 其 包含 的 架构 声明 关联 xml 变量 或 


列 , 如 : 


CREATE TABLE SalesOrders 
(OrderID integer PRIMARY KEY, 
OrderDate datetime, 

CustomerID integer, 

OrderNotes xml(ProductSchema)) 


在 插入 或 更 新 值 时 ,相关 架构 集合 中 的 声明 将 验证 类 型 XML, 出 于 符合 或 兼容 性 原 


因 , 有 可 能 强制 实施 XML 数据 结构 的 业务 规则 。 


xml 数据 类 型 也 提供 了 一 些 方法 ,这 些 方法 可 以 用 于 在 实例 中 查询 和 操纵 XML 数据 。 


例如 ,可 以 在 xml 数据 类 型 的 实例 中 使 用 query 方法 查询 XML, 如 下 面 的 示例 所 示 。 


declare @x xml 

set @x= 

< Invoices > 

< Invoice> 
< Customer > Kim Abercrombie </Customer > 
<Items> 


< Item ProductID = "2" Price = "1.99" Quantity= "1" /> 
< Item ProductID = "3" Price = "2.99" Quantity= "2" /> 
< Item ProductID = "5" Price = "1.99" Quantity= "1" /> 
</Items> 
</Invoice> 
< Invoice> 
< Customer > Margaret Smith </Customer > 
< Items > 
< Item ProductID = "2" Price = "1.99" Quantity= "1"/> 
</Items> 
</Invoice> 
</Invoices>' 
SELECT @x. query( 
< CustomerList> 
{ 
for $ invoice in /Invoices/Invoice 
return $ invoice/Customer 
</CustomerList >') 


这 个 例子 中 的 查询 使 用 了 用 于 在 文档 中 查找 每 个 Invoice 元 素 的 XQuery 表达 式 , 并 
且 从 每 个 Invoice 元 素 返回 包含 Customer 元 素 的 XML 文档 ,其 返回 结果 如 下 所 示 : 
<CustomerList > 
< Customer > Kim Abercrombie </Customer > 
< Customer > Margaret Smith </Customer > 
</CustomerList> 
另 一 个 在 SQL Server 2005 中 引入 的 与 XML 相关 的 显著 功能 是 支持 XML 索引 。 为 
了 增强 XML 的 查询 功能 ,可 以 为 类 型 xml 列 创建 主 XML 索引 和 辅助 XML 索引 。 主 
XML 索引 是 XML 实例 中 所 有 结 点 的 细 化 表示 ,查询 处 理 器 可 以 使 用 它 快 速 查找 XML 值 
中 的 结 点 。 创 建 主 XML 索引 后 ,可 以 创建 辅助 XML 索引 改善 特定 查询 类 型 的 性 能 。 下 
面 的 例子 就 创建 一 个 主 XML 索引 和 一 个 PATH 类 型 的 辅助 XML 索引 ,这 可 以 改善 使 用 
XPath 表达 式 识别 XML 实例 中 结 点 的 查询 性 能 。 


CREATE PRIMARY XML INDEX idx xml_ Notes 
ON SalesOrders (OrderNotes) 


CREATE XML INDEX idx xml Path Notes 
ON SalesOrders (OrderNotes) 
USING XML INDEX idx xml_Notes 
FOR PATH 


3. SQL Server 2008 对 XML 的 支持 

SQL Server 2008 中 与 XML 相关 的 主要 增强 功能 包括 如 下 。 

(1) XML 架构 验证 增强 功能 。 

在 SQL Server 2008 中 ,可 以 通过 强制 实施 与 一 个 或 几 个 XSD 架构 符合 的 方法 验证 
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XML 数据 。 架 构 为 特定 XML 数据 结构 定义 许可 的 XML 元 素 和 属性 .并 通常 用 于 确保 包 
括 所 有 所 需 数据 元 素 的 XML 文档 使 用 正确 的 结构 。 

SQL Server 2005 通过 使 用 XML 架构 集合 引入 了 XML 数据 验证 。 一 般 的 方法 是 通 
过 使 用 CREATE XML SCHEMA COLLECTION 语句 创建 一 个 包含 XML 数据 架构 规则 
的 架构 集合 ,然后 在 定义 xml 列 或 变量 时 ,引用 架构 集合 的 名 称 , 这 些 xml 列 或 变量 必须 符 
合 架构 集合 中 的 架构 规则 。 这 样 ,SQL Server 就 会 验证 在 架构 集合 的 列 或 变量 中 插入 或 更 
新 的 .违反 架构 声明 的 任何 数据 。 

SQL Server 2005 中 的 XML 架构 支持 实现 完整 的 XML 规范 的 大 子 集 ,并 且 包 含 了 大 
多 数 通 用 的 XML 验证 场景 。SQL Server 2008 扩展 了 该 支持 ,使 其 包括 以 下 已 经 由 用 户 标 
识 的 附加 架构 验证 要 求 : 支持 lax 验证 ; 完全 支持 dateTime、time 和 date 验证 ,包括 时 区 
信息 保护 ; 改进 了 对 union 和 list 类 型 的 支持 。 

XML 架构 通过 any、anyAttribute 和 anyType 声明 支持 XML 文档 中 的 通配符 部 分 。 


<xs:complexType name = "Order" mixed= "true"> 
<xs:sequence> 
<xs:element name = "CustomerName"/> 
<xs:element name = "OrderTotal"/> 
<xs:any namespace = " # # other" processContents = "skip" min0ccurs = "0" maxOccurs = 
"unbounded"/> 
</xs:sequence> 


</xs:complexType> 


此 架构 声明 定义 了 一 个 命名 为 Order 的 XML 元 素 , 该 元 素 必 须 包 括 命 名 为 
CustomerName 和 OrderTotal 的 子 元 素 。 此 外 ,该 元 素 还 可 以 包含 不 限 数量 的 其 他 元 素 ， 
但 这 些 元 素 应 与 Order 类 型 属于 不 同 的 命名 空间 。 下 面 的 XML 显示 了 一 个 包含 使 用 此 架 
构 声明 定义 的 Order 元 素 实例 的 XML 文档 。 注 意 : Order 中 还 包含 一 个 没有 在 架构 中 显 
式 定 义 的 shp:Delivery 元 素 。 


< Invoice xmlns = http://adventure — works. com/order 
xmlns: shp = "http://adventure - works. com/shipping"> 

<Order> 

< CustomerName > Graeme Malcolm </CustomerName > 

< OrderTotal > 299.99 </OrderTotal > 

< shp:Delivery> Express </shp:Delivery> 
</Order> 
</Invoice> 


验证 通配符 部 分 依赖 于 架构 定义 中 通配符 部 分 的 processContents 属性 。 在 SQL Server 
2005 中 ,架构 可 以 对 any 和 anyAttribute 声明 使 用 skip 和 strict 的 processContents 值 。 在 前 面 
的 例子 中 ,通配符 元 素 的 processContents 属性 已 经 设置 为 skip, 因 此 没有 尝试 验证 元 素 的 内 
容 。 尽 管 架构 集合 包括 对 shp:Delivery 元 素 的 声明 (例如 ,定义 一 个 有 效 传递 方法 列表 ) ,但 该 元 
素 仍然 是 未 验证 的 ,除非 在 Order 元 素 的 通配符 声明 中 将 processContents 属性 设置 为 strict。 

SQL Server 2008 添加 了 对 第 三 个 验证 选项 的 支持 。 通过 将 通配符 部 分 的 


processContents 属性 设置 为 lax, 可 以 对 任何 含有 与 它们 相关 架构 声明 的 元 素 强制 实施 验 
证 ,但 是 忽略 任何 在 架构 中 未 定义 的 元 素 。 继 续 前 面 的 例子 ,如 果 将 架构 中 通配符 元 素 声 明 
的 declaration 属性 设置 为 lax, 并 为 shp:Delivery 元 素 添加 一 个 声明 , 则 在 XML 文档 中 的 
shp:Delivery 元 素 将 被 验证 。 然 而 ,如 果 替 换 shp:Delivery 元 素 , 则 文档 就 包含 一 个 在 架构 
中 未 定义 的 元 素 ,此 元 素 将 被 忽略 。 

此 外 ,XML 架构 规范 定义 了 anyType 声明 ,该 声明 包含 anyType 内 容 模 式 的 lax 处 
理 。SQL Server 2005 不 支持 lax 处 理 ,因此 anyType 内 容 会 被 严格 验证 。SQL Server 
2008 支持 anyType 内 容 的 lax 处 理 , 因 此 该 内 容 会 被 正确 验证 。 

(2) XQuery 增强 功能 。 

SQL Server 2005 引入 了 xml 数据 类 型 ,提供 了 用 于 对 存储 在 列 或 变量 中 的 XML 数 
据 执 行 操作 的 大 量 方法 。 可 执行 的 大 多 数 操作 都 使 用 XQuery 语法 导航 和 操纵 XML 数 
据 。SQL Server 2005 支持 的 XQuery 语法 包括 FLWOR 表达 式 中 的 for、where、order by 
和 return 语句 ,这 些 语句 可 用 于 循环 访问 XML 文档 中 的 结 点 ,也 可 用 于 返回 值 。 

SQL Server 2008 添加 了 对 let 语句 的 支持 ,该 语句 用 于 向 XQuery 表达 式 中 的 变量 赋 
值 ,如 下 面 的 示例 所 示 : 


declare @x xml 
set @x= 
< Invoices > 
< Invoice> 
< Customer > Kim Rbercrombie</Customer > 
< Items > 
< Item ProductID = "2" Price = "1.99" Quantity= "1" /> 
< Item ProductID = "3" Price = "2.99" Quantity= "2" /> 
< Item ProductID = "5" Price = "1.99" Quantity= "1" /> 
</Items > 
</Invoice> 
< Invoice> 
< Customer > Margaret Smith </Customer > 
< Items > 
< Item ProductID = "2" Price = "1.99" Quantity= "1"/> 
</Items> 
</Invoice> 
</Invoices >' 


SELECT @x. query( 

< Orders > 

{ 

for $ invoice in /Invoices/Invoice 
let $ count : = count( $ invoice/Items/Item) 
order by $ count 

return 

<Order> 

{ $ invoice/Customer} 

< ItemCount >{ $ count}</ItemCount > 
</Order> 

} 

</Orders>') 
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这 个 例子 返回 以 下 XML: 


<Orders> 
<Order> 
< Customer > Margaret Smith</Customer > 
< ItemCount > 1 </ItemCount > 
</Order> 
<Order> 
< Customer > Kim Abercrombie </Customer > 
< ItemCount > 3 </ItemCount > 
</Order> 
</Orders> 


(3) XML DML 增强 功能 。 

与 使 用 XQuery 表达 式 对 XML 数据 执行 操作 一 样 ,xml 数据 类 型 通过 其 modify 方法 
支持 insert、replace value of 和 delete 这 些 XML DML 表达 式 。 可 以 使 用 这 些 XML DML 
表达 式 操纵 xml 列 或 变量 中 的 XML 数据 。 

SQL Server 2008 添加 了 对 使 用 insert 表达 式 中 的 xml 变量 向 现 有 XML 结构 插入 
XML 数据 的 支持 。 例 如 ,假定 一 个 名 称 为 @productList 的 xml 变量 包括 以 下 XML: 

<Products> 

<Bike> Mountain Bike </Bike> 


<Bike> Road Bike </Bike> 
</Products> 


可 以 使 用 以 下 代码 向 产品 列表 中 插入 一 个 新 自行 车 : 


DECLARE @newBike xml 

SET @newBike = '<Bike> Racing Bike</Bike>' 

SET @productList. modify 

('insert sql:variable("@newBike") as last into (/Products)[1]') 


运行 这 段 代 码 后 ,@productList 变量 中 会 包括 以 下 XML。 


<Products> 
< Bike> Mountain Bike </Bike> 
< Bike> Road Bike </Bike> 
<Bike> Racing Bike </Bike> 
</Products> 


5.10.2 XML 与 数据 库 的 互 操作 过 程 


首先 ,我 们 应 该 明确 XML 不 是 数据 库 , 数 据 库 系 统 有 它 自己 的 一 套 管 理 模式 ,而 XML 
仅仅 是 用 来 存放 结构 化 数据 的 文件 ,在 这 一 点 相当 于 XML 文档 仅仅 代表 着 数据 库 中 的 某 
一 个 表 。 因 此 XML 不 可 能 取代 数据 库 , 但 将 数据 库 和 XML 结合 起 来 ,能 够 完成 很 多 以 前 
无 法 完成 的 工作 ,例如 异 构 数据 交换 、 应 用 系统 集成 等 。 

开发 一 个 访问 数据 库 的 XML 应 用 系统 需要 同时 借助 XML 编程 接口 和 数据 库 编 程 接 


口 ,前 者 用 于 对 XML 文档 的 解析 、 定 位 和 查询 ,所 需 技术 包括 DOM 和 SAX; 后 者 则 是 用 
于 访问 数据 库 , 如 数据 库 中 数据 的 更 新 和 检索 等 ,需要 利用 的 技术 有 ODBC、JDBC、ADO/ 
ADO.NET 等 。 

XML 与 数据 库 的 互 操作 过 程 如 图 5-19 所 示 。 


XML 应 用 程序 /浏览 器 
文档 


ADO/ADO.NET 
其 他 方式 | | | | 
| pow || ps | ss js 
XML SQL 
数据 库 
h 
—~| ADO/ADO.NET XML 文 档 


HTTP+SQL Te version= 
ol ML 站 


5-19 XML 与 数据 库 的 互 操作 过 程 


对 于 XML 文档 ,可 以 通过 DOM 读 取 XML 文档 中 的 结 点 。 如 本 章 前 面 所 述 ,DOM 是 
W3C 的 一 种 技术 标准 ,实际 上 是 提供 一 组 API 来 处 理 XML 数据 ,可 以 通过 JavaScript、 
JScript、VBScript 等 脚本 程序 来 调用 ,也 可 通过 C++ 、Java 等 高 级 语言 来 实现 。 

其 次 ,通过 DSO(Data Source Object) 进 行 XML 的 数据 绑 定 可 以 方便 地 将 XML 结 点 
同 HTML 标记 捆绑 ,从 XML 文档 中 读 取 或 写 入 数据。DSO 的 工作 方式 有 几 种 ,一 种 是 同 
DOM 类 似 ,通过 对 XML 结 点 树 进行 遍历 来 搜索 结 点 ,每 次 仅 将 结 点 数据 同 HTML 的 一 个 
元 素 ( 如 span 元 素 ) 相 关联 ; 第 二 种 同 第 一 种 的 不 同 之 处 在 于 将 结 点 数据 同一 个 HTML 多 
值 元 素 ( 如 tr 元 素 ) 相 关联 。 

样式 单 CSS 和 XSL 实际 上 是 通过 给 XML 数据 赋予 一 定 的 样式 信息 以 使 其 能 够 在 浏 
览 器 中 显示 。CSS 技术 早 在 HTML 3. 2 中 就 得 以 实现 ,其 关键 是 将 HTML 中 的 元 素 同 预 
先 定 义 好 的 一 组 样式 类 相关 联 以 达到 样式 化 的 目的 ,而 XML 同样 也 支持 这 种 技术 。XSL 
同 CSS 有 些 类 似 , 不 同 之 处 在 于 它 是 通过 定义 一 组 样式 模板 将 XML 源 结 点 转换 成 HTML 
文档 或 其 他 XML 文档 。XSL 实际 上 也 同样 符合 XML 规范 , 它 提供 了 一 套 完整 的 类 似 控 
制 语言 的 元 素 和 属性 ,最 终 可 完成 丰富 多 彩 的 样式 描述 。 

在 ASP/ASP. NET 页 面 文档 中 嵌入 ADO/ADO. NET 对 象 ,将 数据 库 中 的 数据 写 入 
XML 文档 或 将 XML 数据 写 和 数据库 是 微软 对 数据 访问 技术 的 一 种 扩展 。 读 者 可 参阅 本 
书 第 6 章 6. 9 节 “ASP. NET 中 XML 编程 基础 ?部 分 。 
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5.11 XML 的 应 用 和 发 展 前 景 


虽然 人 们 对 XML 的 某 些 技术 标准 尚 有 争议 ,但 是 人 们 已 经 普遍 认识 到 XML 的 作用 和 
巨大 潜力 。 下 面 对 XML 的 应 用 和 发 展 前 景 进行 介绍 。 


5.11.1 XML 的 应 用 

1. 数据 集成 

企业 在 信息 化 过 程 中 已 建立 了 若干 个 独立 的 应 用 系统 ,例如 考勤 管理 系统 .人 事 管理 系 
统 、 财 务 管理 系统 、 库 存 管理 系统 ,等 等 。 各 个 系统 可 能 是 由 不 同 的 软件 公司 开发 的 ,可 能 采 
用 了 不 同 的 技术 .运行 在 不 同 的 平台 上 。 但 企业 运作 是 一 个 整体 ,需要 各 个 系统 相互 配合 ， 
因此 应 用 系统 间 的 数据 交换 成 为 困扰 信息 主管 的 一 大 难题 。 于 是 ,可 能 会 出 现 这 样 的 尴 过 
局 面 : 月 初 ,考勤 系统 管理 员 将 上 月 的 员工 考勤 数据 打包 后 复制 或 发 送 邮 件 传 送 给 人 事 部 
门 ,财务 部 门 也 将 员工 所 在 部 门 的 销售 业绩 统计 打包 传送 给 人 事 部 门 , 而 后 人 事 部 门 运 行 一 
个 批 处 理 程 序 合并 考勤 数据 和 业绩 统计 ,最 后 计算 出 员工 工资 。 类 似 的 情况 在 目前 企业 中 
比比 皆 是 。 企 业 缺 乏 一 个 顺畅 的 业务 管理 平台 ,不 能 将 各 部 门 的 信息 有 机 地 集成 在 一 起 , 势 
必 造 成 管理 上 的 混乱 。 

其 实 造成 上 述 这 种 效率 低下 局 面 的 原因 就 是 各 个 系统 没有 统一 的 数据 结构 约定 。 其 后 
果 不 但 是 效率 低下 ,而 且 信息 宛 余 , 造 成 资源 的 巨大 浪费 。 在 这 种 情况 下 ,XML 是 解决 这 
一 问题 的 强大 法 宝 。XML 将 起 到 粘 合剂 的 作用 ,通过 它 , 使 得 各 业务 模块 有 机 结合 ,数据 
交换 畅通 无 阻 ,从 整体 达到 理 顺 业务 操作 的 目的 。 

数据 集成 的 主要 步骤 为 : 

(1) 对 整个 业务 进行 调整 , 据 弃 不 合理 部 分 。 基 于 XML 的 数据 集成 不 仅仅 是 要 进行 系 
统 开发 ,对 旧 有 系统 的 合理 改造 也 是 很 重要 的 。 

(2) 对 业务 模式 归纳 总 结 , 并 从 中 抽象 出 XML 数据 交换 模型 ,也 即 制定 数据 交换 的 
DTD 或 Schema。 这 是 最 基本 的 ,但 同时 也 是 最 为 困难 的 一 步 。 XML 消息 流 要 符合 企业 的 
信息 流 。 不 要 将 XML 看 作 是 用 来 代替 对 象 或 者 开发 软件 的 新 方法 , 它 应 该 是 一 种 表达 层 
次 结构 信息 并 且 在 不 同 的 应 用 系统 间 传 输 这 种 信息 的 有 效 途径 。 在 制定 XML 数据 交换 模 
型 中 ,一 个 易 犯 的 错误 是 直接 照搬 原来 的 数据 格式 而 仅仅 将 其 逐 字 逐 句 地 “翻译 ”成 XML， 
毕 竞 这 是 一 个 改造 旧 系 统 的 “工程 ”, 去 粗 存 精 方 是 上 策 。 

(3) 结合 制定 好 的 XML 数据 交换 模型 ,运用 XML DOM 和 SAX (Simple API for 
XML) 等 技术 编写 应 用 程序 ,也 可 直接 在 原 系 统 上 进行 改造 。 

2. 交易 自动 化 

目前 全 球 电子 商务 的 发 展 非常 迅速 ,各 种 行业 甚至 跨行 业 的 XML 电子 商务 规范 与 框 
架 层 出 不 穷 ,其 中 比较 有 代表 性 的 是 : Ariba 的 cXML、IBM 的 tpaML CommerceOne 的 
xCBL 2.0、Microsoft 的 BizTalk 框架 .CommerceNet 的 eCo 计划 、RosettaNet 的 eConcert 
计划 与 PIP 规范 集 以 及 联合 国 UN/CEFACT 小 组 和 OASIS 发 起 的 ebXML 计划 。 

一 个 典型 的 应 用 是 ,开发 这 样 一 个 智能 代理 程序 : 首先 ,该 程序 向 某 电子 商务 交易 系统 
发 出 一 个 供 货 商 资料 查询 请 求 ,在 得 到 应 答 后 ,自动 连接 答复 中 提供 的 所 有 供 货 商 站 点 ; 然 
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后 ,搜索 预定 商品 的 信息 ,并 对 获取 到 的 不 同 商家 针对 该 商品 的 价格 .质量 .服务 等 信息 按 一 
定 的 商业 规则 进行 比较 ; 最 后 ,得 出 理想 的 结果 ,并 自动 向 该 站 点 下 订单 。 所 有 这 一 切 都 离 
不 开 XML 技术 的 应 用 。 

3. 设计 标记 语言 

作为 元 标记 语言 ,XML 为 用 户 提供 了 定义 本 行业 本 领域 标记 语言 的 最 好 工具 。 目 前 
这 一 应 用 的 成 功 例子 比比 皆 是 ,例如 化 学 领域 的 CML、 数 学 领域 的 MathML、 移 动 通 信和 领域 
的 WML 等 。 

4. 文件 保值 

XML 良好 的 保值 性 和 自 描 述 性 使 它 成 为 保存 历史 档案 ,如 政府 文件 公文、 科学 研究 
报告 等 的 最 佳 选择 。 如 放 在 数据 库 中 保存 ,若干 年 后 该 数据 库 系 统 已 不 复 存 在 或 不 能 在 新 
的 计算 下 运行 ,文件 只 能 成 为 垃圾 了 。 

5. 集成 不 同 数据 源 

XML 文档 可 以 用 来 描述 包含 在 不 同 应 用 中 的 数据 ,从 Web 页 面 到 数据 库 记 录 等 ,Web 
应 用 的 中 间 层 服务 程序 将 这 些 用 XML 表示 的 数据 组 合 起 来 ,然后 提交 给 客户 端 或 者 下 一 
步 的 应 用 。XML 还 可 以 将 多 个 来 源 的 数据 集成 在 一 个 文档 内 显示 。 

6. 本 地 计算 

XML 数据 传输 到 客户 端 后 ,客户 端 可 以 利用 XML 分 析 器 对 数据 进行 解析 和 操作 ,在 
完成 系统 所 需 功能 的 同时 ,合理 分 配 客户 端 和 服务 器 的 负荷 。 比 如 : 数据 库 记 录 可 以 直接 
传输 到 客户 端 ,然后 再 进行 排序 。 

7. 数据 的 多 种 显示 

XML 将 内 容 与 表现 分 离 ,XML 只 描述 数据 的 结构 和 语义 ,显示 外 观 则 通过 样式 单 文 
件 (CSS 或 XSL) 进行 描述 。 因 此 ,只 需 在 显示 时 配置 不 同 的 样式 单 , 即 可 实现 多 种 显示 
效果 。 

8. 网 络 出 版 

随 着 互联 网 的 发 展 ,网 络 已 经 成 为 一 种 新 的 媒体 ,人 们 在 网 络 上 发 布 各 种 信息 ,信息 的 
发 布 形式 和 发 布 语言 也 多 种 多 样 ,其 中 基于 XML 的 显示 技术 和 显示 语言 发 挥 了 重要 作用 。 
比如 eBook .eNewspaper 等 ,就 利用 了 XML 的 显示 语言 。 

9. 支持 Web 应 用 的 互 操作 和 集成 

Web 界面 定义 语言 (Web Interface Definition Language,， WIDL) 是 webMethods 定义 
的 一 个 XML 应 用 , 它 是 一 个 能 够 用 于 Web 的 资源 和 企业 应 用 接口 的 语言 标准 。 通 过 它 ， 
Web 应 用 可 以 自动 存 取 Web 资源 和 企业 应 用 。 

除了 上 述 应 用 外 ,XML 的 应 用 还 期 竺 你 有 更 多 的 发 掘 。 


5.11.2 XML 的 发 展 前 景 


XML 自 推出 以 来 ,尤其 是 在 1998 年 2 月 成 为 W3C 推荐 标准 以 来 ,受到 了 广泛 的 支持 。 
各 大 软件 厂商 如 IBM、Microsoft、Oracle、Sun 等 都 积极 支持 并 参与 XML 的 研究 和 产品 
工作 ,先后 推出 了 支持 XML 的 产品 或 者 改造 原 有 的 产品 以 支持 XML,W3C 也 一 直 致 力 于 
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完善 XML 的 整个 理论 体系 。 

XML 虽然 获得 了 极 大 的 支持 ,但 是 它 还 有 一 段 路 要 走 。 首 先 ,XML 的 规则 还 有 许多 
技术 细节 没有 解决 。 其 次 ,现在 虽然 出 现 了 一 些 XML 工具 和 应 用 ,但 是 其 市 场 反 应 还 有 待 
进一步 观察 。 另 外 如 何 让 更 多 的 人 迅速 学 会 使 用 XML, 并 利用 它 进 行 开发 ,进而 促进 XML 
的 应 用 也 是 一 个 问题 。XML 的 出 现 和 迅猛 发 展 并 不 意味 着 HTML 即将 退出 互联 网 舞台 ， 
由 于 HTML 的 易学 易 用 和 非常 多 的 工具 支持 ,HTML 将 在 较 长 的 时 间 里 继续 在 Web 舞台 
上 充当 主角 。 但 如 果 用 户 想 超越 HTML 的 范围 ,XML 将 是 最 佳 的 选择 。 

另外 ,由 于 XML 是 用 于 自 定义 标记 的 元 语言 ,任何 个 人 、 公 司 和 组 织 都 可 以 利用 它 来 
定义 自己 的 标记 请 言 , 这 虽然 是 XML 的 魅力 和 灵活 性 所 在 ,但 同时 也 是 XML 的 最 大 问题 
所 在 。 如 果 每 个 人 、 公 司 和 组 织 都 定义 了 自己 的 标记 语言 ,它们 之 间 的 通信 就 会 出 现 困难 。 
因此 在 一 些 领 域 先 后 出 现 了 一 些 标 准 化 组 织 , 它 们 的 任务 就 是 规范 本 领域 的 标记 语言 ,形成 
统一 的 标准 ,使 得 在 本 领域 内 的 通信 成 为 可 能 。 但 在 标准 推出 并 得 到 广泛 认可 之 前 ,各 自 为 
政 的 局 面 将 继续 下 去 。 更 糟糕 的 是 ,由 于 对 应 用 的 理解 不 一 臻 和 商业 利益 等 原因 ,同一 个 领 
域 也 许 还 有 多 个 标准 化 组 织 ,它们 形成 的 标记 语言 并 不 完全 兼容 ,使 得 采取 不 同 标准 的 计算 
机 仍然 难以 通信 。 

无 论 如 何 ,XML 的 出 现 使 互联 网 路 入 了 一 个 新 的 阶段 , 它 已 成 为 因特网 领域 中 一 个 重 
要 的 数据 交换 标准 和 开发 平台 。 没 有 XML 就 没有 Web 服务 ,也 就 没有 今天 构建 应 用 软件 
的 艇 艇 烈 烈 的 SOA(Service Oriented Architecture)。XML 的 诞生 已 经 而 且 将 继续 促使 全 
新 种 类 的 基础 架构 和 应 用 程序 的 产生 ,而 这 些 新 的 基础 架构 和 应 用 程序 又 将 需要 新 的 软件 
和 硬件 工具 。 可 以 预测 ,无 论 是 在 软件 还 是 硬件 上 ,XML 都 将 开辟 一 系列 的 新 市 场 ,促成 
互联 网 上 新 的 革命 。 


思考 练习 题 


1. 简 述 什么 是 XML,XML 与 HTML 有 什么 区 别 。 

2. CSS 与 XSL 有 什么 区 别 ? 

3. 什么 是 XML 数据 岛 ? 如 何 使 用 ? 

4. XML DTD 与 XML Schema 有 什么 区 别 ? 

5. 怎么 理解 XML 安全 性 ? XML 有 哪 几 种 安全 标准 ? 

6. XPath 和 XPointer 有 什么 区 别 ? XLink 与 HTML 中 的 超 链 接 有 什么 区 别 ? 
7. 对 本 章 的 所 有 例子 进行 上 机 验证 。 
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学 习 要 点 

(1) 掌握 C# 井 语言 编程 技术 。 

(2) 了 解 ASP. NET 的 运行 模式 。 

(3) 熟悉 ASP. NET 的 服务 器 对 象 。 

(4) 掌握 ASP.NET 基 本 控件 的 使 用 。 

(5) 学 会 配置 Web. config 文件 。 

(6) 掌握 ADO. NET 数据 库 访问 技术 。 

(7) 学 会 使 用 VS 2010 创建 Web 服务 。 

(8) 掌握 进行 .NET 控件 开发 的 技术 。 

ASP. NET 是 微软 推出 的 全 新 体系 结构 . NET 平台 的 一 部 分 , 它 提供 了 
一 种 以 . NET Framework 为 基础 ,开发 Web 应 用 程序 的 全 新 编程 模式 ,和 现 
有 各 种 Web 开发 模式 相 比 ,ASP. NET 可 以 使 Web 开发 人 员 更 快捷 和 方便 
地 开发 Web 应 用 程序 。 

ASP. NET 相 比 ASP(Active Server Pages) 脚 本 语言 有 了 革命 性 的 改进 。 
从 底层 来 说 ,ASP. NET 完全 基于 . NET 框架 完全 面向 对 象 ,不 仅 更 易于 创建 
动态 Web 内 容 , 还 易于 创建 复杂 和 可 靠 的 Web 应 用 程序 如 Web 服务 等 。 

在 ASP 中 ,每 一 个 功能 都 需要 开发 人 员 单 独 编写 代码 完成 。 为 了 构造 
一 个 完整 的 Web 页 面 ,并 控制 不 同 的 部 分 完成 相应 的 功能 ,开发 人 员 需 要 编 
写 大 量 的 代码 。 而 ASP. NET 提供 了 丰富 的 服务 器 端 控件 ,开发 人 员 只 需要 
选用 合适 的 控件 并 且 设 置 和 调整 其 属性 ,就 可 以 实现 很 多 原来 ASP 中 需要 
大 量 编码 的 功能 。 不 仅 如 此 ,ASP. NET 还 支持 用 户 控 件 和 自 定义 控件 , 进 
一 步 提供 更 加 丰富 完整 的 控件 支持 ,简化 开发 人 员 的 工作 ,使 其 把 大 量 精力 
放 在 核心 业务 代码 的 处 理 上 。 

在 ASP 中 使 用 ADO(ActiveX Data Object) 来 访问 数据 库 , 它 是 面向 连 
接 的 数据 访问 方式 ; 而 在 ASP. NET 中 采用 ADO. NET 来 访问 数据 库 , 它 是 
一 种 无 连接 的 基于 消息 机 制 的 数据 访问 方式 。 在 ADO. NET 中 ,数据 源 的 
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数据 可 以 作为 XML 文档 进行 传输 和 存储 ; 数据 可 以 脱离 源 数 据 库 进行 各 种 操作 ,在 需要 时 
连接 数据 库 将 更 新 过 的 数据 写 到 数据 库 中 。 

在 ASP 中 采用 支持 弱 类 型 的 VBScript 和 JScript 两 种 脚本 语言 ,而 在 ASP. NET 中 采 
用 强 类 型 语言 VB. NET、C# 等 ,采用 完全 面向 对 象 方式 编程 。 

在 ASP 中 无 法 开发 一 个 Web Service, 而 在 ASP. NET 中 建立 一 个 Web 服务 是 相当 方 
便 的 ,可 用 Web 服务 来 为 异 构 系 统 实现 数据 交换 。 

总 之 ,ASP. NET 完全 基于 模块 和 组 件 ,具有 更 好 的 可 扩展 性 与 可 定制 性 ,其 特性 远 远 超 
越 了 ASP, 给 Web 开发 人 员 提 供 了 更 好 的 灵活 性 ,有 效 缩短 了 Web 应 用 程序 的 开发 周期 。 

图 6-1 所 示 为 ASP. NET 的 体系 结构 。ASP. NET 和 ASP 一 样 通过 ISAPICInternet 
Server Application Programming Interfaces) 与 IIS 通信。 事实 上 ,ASP 和 ASP. NET 可 以 
共存 于 IIS 服务 器 上 。ASP. NET 中 有 一 个 cache, 用 来 作为 页 面 的 缓存 ,用 以 提高 性 能 。 
另外 ASP. NET 还 包括 一 个 跟踪 用 户 会 话 的 状态 管理 服务 。 


人 AsP 页 面 ] [AsPNET 页 面 ] 


项 赣 准 走 L3N 


ASP ASP.NET 
缓冲 区 


| | | | 
lIS 


图 6-1 ASP. NET 体系 结构 


要 学 好 ASP. NET 的 编程 ,必须 掌握 一 种 编程 语言 。 本 章 将 首先 介绍 C# 语 言 ,为 读者 
编程 提供 参考 (详细 的 C# 编 程 方 法 请 看 专门 书籍 ); 然后 介绍 主要 Web 服务 器 标准 控件 、 
服务 器 端 验证 控件 和 ASP. NET 内 置 服务 器 对 象 等 的 使 用 ,介绍 Web. config 文件 的 作用 
和 常用 配置 参数 ; 重点 将 介绍 ADO. NET 数据 库 访问 技术 以 及 执行 存储 过 程 ,数据 库 的 事务 
处 理 . 跨 数据 库 访问 .数据 绑 定 技术 等 内 容 ; 并 将 给 出 创建 和 访问 Web 服务 的 实例 ; 随后 以 案 
例 方式 对 . NET 中 的 代码 重用 实现 技术 ,包括 Web 开发 中 的 类 库 构 建 与 访问 .Web 自 定 义 控 
件 和 工具 箱 控件 开发 等 进行 初步 介绍 ; 最 后 实例 演示 如 何在 ASP. NET 中 进行 XML 编程 。 


6.1 C+# 语 言 初 步 


6.1.1 C# 程 序 的 基本 结构 


C# 是 由 C 和 和 C++ 发 展 而 来 的 面向 对 象 与 类 型 安全 的 编程 语言 。C# 读 作 C Sharp, 它 
和 Java 非常 相近 ,其 目标 在 于 把 Visual Basic 的 高 生产 力 和 C++ 本 身 的 能 力 结合 起 来 。 下 
面 我 们 通过 一 个 C# 语 言 的 简单 例子 来 了 解 一 些 概念 和 用 C# 语 言 编 写 程序 的 方法 。 

【 例 6.1】 将 下 列 代码 存 为 C:\Windows\Microsoft. NET\Framework\v2. 0. 50727\ 
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hello. cs 文件。 此 处 Windows 目录 为 Window 操作 系统 的 安装 目录 。 然 后 从 命令 窗口 进 
入 上 述 文 件 夹 ,在 命令 行 输入 csc hello. cs 进行 编译 后 ,就 会 生成 一 个 名 为 hello. exe 的 可 执 
行程 序 ,运行 它 就 会 出 现 : Hello, world。 


using System; 
class Hello 
{ static void Main() { 
Console. WriteLine("Hello, world"); 
上 


下 面 对 这 个 程序 进行 一 些 说 明 。 

(1) C# 程 序 的 源 代 存 储 在 扩展 名 为 . cs 的 文件 中 。 

(2) using System 指令 涉及 一 个 叫做 System 的 名 称 空间 (namespace) ,又 翻译 成 命名 
空间 ,这 是 Microsoft. NET 类 库 提 供 的 。 这 个 名 称 空间 包括 在 Main 方法 中 使 用 的 Console 
类 。 名 称 空间 提供 了 一 种 用 来 组 织 一 个 类 库 的 分 层 方法 。 分 层 的 类 库 之 间 用 操作 符 “. ” 表 
示 上 下 级 分 层 关系 。 使 用 “using” 命 令 后 ,就 可 以 无 障碍 地 使 用 名 称 空间 中 的 各 种 类 型 成 
员 。. NET 中 的 名 称 空间 概念 和 前 面 XML 所 说 的 名 称 空 间 不 太 相似 ,XML 中 名 称 空间 为 
了 避免 名 称 冲突 ,可 以 确保 各 个 用 户 定义 的 相同 标记 元 素 在 各 个 名 称 空间 下 具有 不 同 的 含 
义 , 而 此 处 的 名 称 空间 除了 具有 避免 名 称 冲 突 之 功能 外 ,更 重要 的 是 引用 后 ,你 就 可 以 在 你 
的 程序 代码 中 方便 地 使 用 系统 提供 的 各 种 类 库 成 员 ,例如 ,用 C# 语 言 实现 复制 一 个 文件 的 
代码 为 : 


System. I0.File. Copy("c:\\1.cs", "c:\\2.cs", true ); 


可 以 理解 为 System 名 称 空间 下 有 一 个 IO 名 称 空间 ,IO 名 称 空间 下 又 有 一 个 File 类 ,每 个 
名 称 空间 下 都 有 许多 系统 提供 的 可 直接 调用 的 方法 。 调 用 方法 时 ,如 果 你 不 想 输入 全 称 ,可 
使 用 using 指示 符 。 这 样 上 述 代码 可 以 写成 : 


using System. I0; 


File.Copy("c:\\1.cs","c:\\2.cs", true ); 


同样 , 例 6. 1 中 Console 是 System 名 称 空间 中 的 成 员 类 ,该 类 有 个 WriteLine 的 方法 。 该 
方法 的 全 称 是 : System. Console. WriteLine(...) ,因为 用 了 using,; 所 以 上 述 代码 就 简写 成 
Console. WriteLine(... )。 

(3) Main 方法 是 类 Hello 中 的 一 个 成 员 , 它 有 static 说 明 符 ,所 以 它 是 类 Hello 中 的 一 个 方法 
而 不 是 此 类 中 的 实例 。Main 方法 是 应 用 程序 的 主 入 口 点 ,也 称 作 开始 执行 应 用 程序 的 方法 。 

(4) C# 语 言 编 译 器 CSC. exe 只 是 将 程序 员 编 写 的 代码 编译 成 MSIL (Microsoft 
Intemediate Language) 中 间 语 言 。 中 间 语 言 在 安装 时 被 运行 库 编译 成 本 机 代码 或 者 首次 运 
行 时 被 实时 编译 。 因 此 例 6. 1 中 的 hello. exe 只 是 一 个 由 中 间 语 言 可 执行 文件 头 组 成 的 可 
移植 执行 文件 。 
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6.1.2 C# 中 的 数据 类 型 


C# 支 持 两 种 类 型 : 数据 类 型 和 引用 类 型 。 数 据 类 型 包括 一 些 简单 类 型 (例如 char、\int 
和 float) 、 枚 举 类 型 和 结构 类 型 。 引 用 类 型 包括 类 类 型 .接口 类 型 代表 (delegate) 类 型 和 数 

数据 类 型 和 引用 类 型 的 区 别 在 于 ,数据 类 型 变量 直接 包含 它们 的 数据 ,而 引用 类 型 变量 
存储 对 于 对 象 的 引用 。 对 于 引用 类 型 ,有 可 能 两 个 变量 引用 相同 的 对 象 ,因而 可 能 出 现 对 一 
个 变量 的 操作 影响 到 其 他 变量 所 引用 对 象 的 情况 。 对 于 数据 类 型 ,每 个 变量 都 有 它们 自己 
对 数据 的 复制 ,所 以 不 太 可 能 因为 对 一 个 进行 操作 而 影响 到 其 他 变量 。 

【 例 6.2】 数据 类 型 和 引用 类 型 示例 。 


1 using System; 
2 class Classl { 
:| public int Value = 0; 
4 

5 class Test { 
6 static void Main() 
{ 

8 


int vall = 0; 
| int val2 = vall; 
10 val2 = 123; 
了 Classl refl = new Class1(); 
2 Classl ref2 = refl; 
£3 ref2.Value = 123; 
14 Console. WriteLine("Values: {0}, {1}", vall, val2); 
5 Console.WriteLine("Refs: {0}, {1}", refl.Value, ref2.Value); 
16 } 


此 例 分 别 输出 0,123 和 123,123。 对 局 部 变量 vall 的 赋值 没有 影响 到 局 部 变量 val2， 
因为 两 个 局 部 变量 都 是 数据 类 型 (int 类 型 ) ,并且 每 个 数据 类 型 的 局 部 变量 都 有 它们 自己 的 
存储 地 址 。 与 此 相对 的 是 ,对 于 ref2. Value 的 赋值 ref2. Value 二 123 对 refl 和 ref2 都 有 影 
响 。 从 第 14 和 15 行 可 看 到 Console. WriteLine 各 使 用 了 2 个 变量 来 实现 字符 串 格式 输出 。 
其 中 占 位 符 {0} 和 11} 各 指向 一 个 变量 。 占 位 符 {0} 指 向 第 一 个 变量 , 占 位 符 {1} 指 向 第 二 个 
变量 。 在 输出 被 送 到 控制 台 前 ,这 些 占 位 符 会 被 它们 相对 应 的 变量 所 替换 。 

开发 者 可 以 通过 枚 举 和 结构 声明 定义 新 数据 类 型 ,可 以 通过 类 ,接口 和 委派 声明 来 定义 
新 引用 类 型 。 


6.1.3 C# 变 量 声 明 及 其 初始 化 


C# 语 言 是 一 种 强 类 型 的 语言 ,在 使 用 变量 前 必须 对 该 变量 的 类 型 进行 声明 。 虽 然 各 
种 类 型 的 变量 都 有 默认 值 ,但 为 了 方便 后 面 的 程序 调试 .建议 在 声明 变量 时 就 对 变量 进行 初 
始 化 。 变 量 声明 及 其 初始 化 方法 如 表 6-1 所 示 。 
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表 6-1 C# 变 量 声明 及 其 初始 化 
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(1) 值 类 型 

整 型 取 值 范围 .NET 框架 基 类 | 声明 及 初始 化 

sbyte 一 128 一 127 System. SByte “| sbyte a 一 1,b 一 5,c;  // 有 符号 8 位 整数 

byte 0~255 System. Byte byte a=1,b=2; // 无 符号 8 位 整数 

short 一 32 768 一 32 767 | System. Int16 short a=60; // 有 符号 16 位 整数 

ushort 0~65 535 System. UInt16 | ushort a=60; // 无 符号 16 位 整数 

int ee ed | System. Int32 int a=10,b=60; // 有 符号 32 位 整数 

uint 0~2*—1 System. UInt32 | uint uIntl = 123; // 无 符号 32 位 整数 

long 一 2 一 2 一 1 System. Int64 long ! 一 4294967296L; // 有 符号 64 位 整数 

ulong 0 一 24%4 一 1 System. UInt64 | ulong u 二 92233720; ”// 无 符号 64 位 整数 

浮 点 型 ”| 取 值 范围 . NET 框架 基 类 | 初始 化 

Hoat 土 1.5*10A—45~ | System. Single | float x= 3. 5F; // 默 认 情 况 下 实数 被 视 为 
士 3.4x 10 A308 double 类 型 。 使 用 后 缀 f 或 下 可 转化 为 浮 点 型 

double 土 5.0* 10 A—324~ | System. Double | double x=5.0,y = 3d; // 希 望 整数 被 视 为 
土 1.7* 10 308 double 类 型 ,使 用 后 级 d 或 D 

decimal | 士 1.0* 10 人 一 28 一 | System. Decimal | decimal myMoney = 300.5m; // 希 望 实数 被 视 
士 7.9* 10 28 为 decimal 类 型 , 则 使 用 后 缀 m 或 M 

布尔 型 | 取 值 范围 . NET 框架 基 类 | 初始 化 

bool True 和 false System. Boolean | bool test=true,flag= (100<=110) 

字符 型 “| 取 值 范围 .NET 框架 基 类 | 初始 化 

char 特殊 整 型 ,16 位 单 | System. Char char cl 一 'B',c2 一 \x0066' //16 进 制 转 义 
unicode 字符 int myJInt 一 (int)'A" 


C# 中 采用 转 义 字符 来 代替 一 些 特殊 的 字符 ,常用 的 有 单 引号 (\")、 反 斜 枉 (\\)、 退 格 (\b)、 回 车 (\r)、 换 


行 (\n) , 空 字符 (\0)、 双 引号 (\") ,感叹 号 (\a) , 制 表 符 (\b 等 


(2) 引用 类 型 


Obiect 对 象 是 所 有 类 型 的 父 类 型 ,是 C# 中 所 有 其 他 类 的 基 类 ,可 赋予 任何 类 型 的 值 ,例如 : 


object myobj 二 80; 或 者 object obj 二 new object(); 


string 字符 品类 型 表示 Unicode 字符 的 字符 串 ,是 . NET Framework 中 预定 义 类 的 System。String 的 别 
名 ,例如 : string a 一 "good " 十 "morning"; 


数组 是 一 种 包含 若干 变量 的 数据 结构 ,所 有 数组 元 素 可 以 通过 数组 名 和 下 标 来 访问 。 下 面 举例 说 明 数 
组 的 初始 化 方法 。 

string [] myarray = { "x", "y", "z" }; 
int[] myarray = new int[100]; // 声 明 一 个 数组 ,没有 初始 化 

int[,] myarray = {{100,10}, {101,11}, {102,12}}; // 初 始 化 一 个 二 维 数组 ,等 价 于 下 面 两 行 
myarray[0,0] = 100; myarray[1,0]= 101; myarray[2,0]= 102; 

myarray[0,1] = 10; myarray[1,1]=11; myarray[2,1]= 12; 


// 声 明 一 个 有 3 个 元 素 的 数组 


类 的 类 型 定义 了 一 个 数据 结构 , 它 包 括 数据 成 员 和 函数 成 员 ,支持 继承 和 多 态 。C# 中 预定 义 的 类 类 型 
有 : System. Object( 所 有 其 他 类 型 的 最 终 基 类 ) System. String(C# 语 言 字符 串 类 型 ) System. Valtype 
(所 有 值 类 型 的 基 类 )、System. Enum( 所 有 枚 举 类 型 的 基 类 )、System. Array( 所 有 数组 类 型 的 基 类 )、 
System. Delegate( 所 有 委托 类 型 的 基 类 )、System. Exception( 所 有 异常 类 型 的 基 类 )。 下 面 代码 定义 了 一 
个 类 mycode, 它 包含 一 个 变量 和 一 个 方法 : 
class mycode { // 定 义 了 一 个 类 mycode 
public double cd; // 定 义 了 类 mycode 的 一 个 变量 
public double getcd() { // 定 义 了 类 mycode 的 一 个 方法 
return this. cd; 
} 
} 


引用 类 型 中 的 接口 类 型 和 委托 类 型 此 处 不 作 介 绍 , 读 者 可 参看 其 他 C# 方 面 的 资料 
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变量 名 必须 以 英文 字母 或 @ 开 头 , 由 字母 数字、 下 划 线 组 成 ,不 能 有 空格 .标点 .运算 符 
号 .C# 中 关键 字 名 和 C# 中 库 函 数 名 , 且 对 大 小 写 敏感 。C# 中 有 静态 变量 ,引用 参数 、 数 
组 变量 .实例 变量 、 值 参数 .输出 参数 和 局 部 变量 7 种 变量 类 型 ,如 表 6-2 所 示 。 
表 6-2 C# 变 量 类 型 
变量 类 型 说 明 
静态 变量 用 static 修饰 符 声明 的 变量 ,如 static double 二 1.0。 当 静态 变量 所 属 的 类 被 加 载 后 ,静态 
变量 就 一 直 存在 ,并 且 所 有 属于 这 个 类 的 实例 都 共用 同一 个 变量 
实例 变量 。 未 用 static 修饰 的 变量 。 它 们 属于 类 的 实例 。 当 创建 该 类 的 新 实例 时 ,实例 变量 开始 存 
在 ; 当 所 有 对 该 实力 的 引用 结束 后 ,该 实例 变量 终止 
引用 参数 用 ref 修饰 符 声 明 的 参数 。 引 用 参数 的 值 与 被 引用 的 基础 变量 相同 ,所 以 引用 参数 不 占 
用 、 不 创建 新 的 存储 位 置 
输出 参数 ”用 out 修饰 符 声 明 的 参数 。 它 表示 函数 调用 中 的 基础 变量 ,不 创建 新 的 存储 位 置 
值 参数 未 用 ref 或 out 修饰 符 声明 的 参数 。 在 调用 参数 所 属 的 函数 成 员 时 开始 存在 , 当 返 回 该 函 
数 成 员 时 值 参 数 终止 
局 部 变量 在 某 个 独立 的 程序 块 中 声明 的 变量 。 作 用 域 仅 限于 此 程序 块 ,如 for、switch 语句 等 


C# 中 定义 常量 用 const 修饰 符 , 例 如 : public const double y=1. 234; 。 枚 举 类 型 是 由 
一 组 特定 常量 构成 的 一 种 数据 结构 ,是 值 类 型 的 特殊 形式 。 当 需要 一 个 由 指定 常量 集合 组 
成 的 数据 类 型 时 ,可 使 用 枚 举 类 型 。 枚 举 类 型 不 能 实现 接口 ,不 能 定义 方法 、 属 性、 事件。 
【 例 6.3】 枚 举 类 型 示例 。 


using System; 
enum enumChoice {A=1,B=2,C=3,D=4} // 定 义 了 一 个 枚 举 类 型 
class Choice { 
public static void Main() { 
choice = (int)enumChoice. A; // 演 示 枚 举 类 型 的 使 用 方式 
Console. WriteLine(" 你 选择 的 是 : {0}"，choice); // 控 制 台 输出 "你 选择 的 是 : 1" 


} 


6.1.4 C# 表 达 式 


表达 式 是 可 以 计算 且 结 果 为 单个 值 、 对 象 、 方 法 或 命名 空间 的 代码 片段 。 表 达 式 可 以 包 
含 文本 值 方 法 调用 、 操 作 符 及 其 操作 数 或 简单 名 称 。 与 CC++ 相 同 ,C# 的 表达 式 大 致 包 
含 了 算术 表达 式 ,赋值 表达 式 .关系 表达 式 和 人 逻辑 表达 式 4 种 。 

1. 算术 表达 式 

用 算术 操作 符 把 数值 连接 在 一 起 的 、 符 合 C# 语 法 的 表达 式 称 为 算术 表达 式 。 算 术 操 
作 符 包括 十 、 一 、* 、/、%\ 十 十 一 一 。 其 中 模 运算 % 表 示 整 除 取 余数 ; 十 十 分 为 前 绥 增 1 
〈 先 加 1 后 再 使 用 ) 和 后 组 增 1( 先 使 用 后 再 加 1) 两 种 ; 一 一 分 为 前 缀 减 1( 先 减 1 后 再 使 用 ) 
和 后 级 减 1( 先 使 用 后 再 减 1) 。 另 外 C# 还 提供 了 专门 针对 二 进 制 数 据 操作 的 运算 符 , 包 括 
以 下 6 个 : &&( 与 )、| (或 )、A( 异 或 )、 一 ( 补 )、 二 二 ( 左 移 ) 二 二 ( 右 移 )。 

2. 赋值 表达 式 

赋值 操作 符 用 于 为 变量 .属性 .事件 或 索引 器 元 素 赋 予 新 值 。 赋 值 操作 符 的 运算 对 象 、 
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运算 法 则 及 运算 结果 如 表 6-3 所 示 。 
表 6-3 C# 赋 值 操作 符 的 运算 规则 


操 作 符 名 称 运算 对 象 运算 结果 
= 赋值 任意 类 型 任意 类 型 
+=、—=、*=,/= 加 , 减 ,乘除 赋值 数值 型 ( 整 型 . 实 型 等 ) ”数值 型 ( 整 型 . 实 型 等 ) 
%= 模 赋值 整 型 整 型 
&=,1 =,>>=、 位 与 .位 或 、 右 移 、 左 。” 整 型 或 字符 型 整 型 或 字符 型 
ee 移 、 异 或 赋值 
3. 关系 表达 式 


\ = 一、 二 .>、 志 一 和 > 一 等 操作 符 称 为 关系 操作 符 。 用 关系 操作 符 把 运算 对 象 连 
接 起 来 并 符合 C# 语 法 的 式 子 称 为 关系 表达 式 。 关 系 表达 式 要 么 返回 true 要 么 返回 false。 
C# 中 还 定义 了 is 操作 符 , 其 格式 为 : A( 值 ) is B( 类 型 ) ,意义 是 如 果 A 是 BB 类 型 或 者 A 可 
以 转化 为 B 类 型 则 返回 true, 和 否则 为 false。 
4. 逻辑 表达 式 
&& (and)、||(or 和 ! (not) 操 作 符 称 为 逻辑 操作 符 。 用 人 逻辑 操作 符 把 运算 对 象 连 接 
起 来 并 符合 C# 语 法 的 式 子 称 为 逻辑 表达 式 。 


6.1.5 C# 控 制 语句 


C# 中 控制 语句 主要 包括 分 支 和 循环 语句 。 分 支 语 句 有 3 种 : 三 元 运算 符 , 例 如 : 
a 一 (b>5)? 100:10 表示 b>5 时 a 二 100, 否 则 a 二 10; @if 语句 ; @switch 语句 。 循 环 语句 
有 4 种 : @ 已 知 步 长 的 for 语句; @foreach 语句 ; @while 语句 ; 四 do while 语句 。 它 们 的 
语法 结构 如 表 6-4 所 示 。 其 中 switch 语句 可 一 次 将 测试 变量 与 多 个 值 比较 ,而 ff 仅仅 测试 
一 个 条 件 。 对 于 循环 语句 可 用 break 和 continue 语句 决定 是 否 跳出 循环 或 继续 执行 循环 。 
foreach 语句 可 以 遍历 一 个 集合 中 的 所 有 元 素 。 


表 6-4 C# 的 分 支 /选择 语句 及 循环 语句 


让 switch for while foreach do while 
if(…) | switch( 控 制 表 | for(int i=0; | int i=0; a nen | 
{ 达 式 ) { i<10;i++) while(i<10) char[ ]{'0%, dv av3 内 艇 语句 
本 case 测试 值 1: | { 5 } while ( 循 
} 语句 1 we foreach (char i in 环 控制 条 
else break; : i++; person) 性 
{ case 测试 值 2: } ‘ 
让 证 可 于 (= 全 人 
: break; {… } 
> else if(i== '2') 
默认 语句 下 
break; else 
} a 
} 
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另外 可 用 try-catch-finally 语句 来 捕捉 异常 ,其 使 用 方法 和 JavaScript 语言 中 的 语法 相 
类 似 。 在 Web 开发 中 应 尽量 处 理 各 种 可 能 性 , 少 用 捕捉 异常 来 实现 功能 。 


6.1.6 C# 类 声明 


类 声明 定义 新 的 引用 类 型 。 一 个 类 可 以 从 其 他 类 继承 。 类 是 一 种 将 数据 成 员 、 函 数 成 
员 和 府 套 类 型 等 进行 封装 的 数据 结构 。 它 在 面向 对 象 基础 上 引入 了 接口 、 属 性 \ 方 法 .事件 
等 组 件 特 性 。 其 数据 成 员 可 以 是 常量 或 域 ,函数 成 员 可 以 是 方法 、 属 性 索引、 事件、 操作 符 或 
静态 构造 函数 和 析 构 函数 。 构 造 函 数 在 创建 对 象 时 自动 调用 ,用 来 执行 对 象 的 初始 化 操作 ,其 
函数 名 总 是 与 类 名 相同 。 析 构 函 数 在 释放 对 象 时 被 调用 ,用 来 在 删除 对 象 前 做 一 些 清 理工 作 。 

类 中 的 每 个 成 员 都 必须 定义 其 被 访问 的 范围 ,用 类 的 访问 修饰 符 来 表示 可 访问 这 个 成 
员 的 程序 文本 的 区 域 。 类 的 访问 修饰 答 有 5 种 可 能 形式 ,如 表 6-5 所 示 。 

表 6-5 类 的 访问 修饰 符 


序号 形 式 直观 意义 
1 public 访问 不 受 限制 
2 protected 访问 只 限于 此 程序 或 类 中 包含 的 类 型 
3 internal 访问 只 限于 此 程序 
4 protectedinternal 访问 只 限于 此 程序 或 类 中 包含 的 类 型 
5 private 访问 只 限于 所 包含 的 类 型 
下 面 简 要 介绍 类 成 员 的 有 关 概 念 。 
1. 常数 


一 个 常数 是 一 个 代表 常数 值 的 类 成 员 , 即 某 个 可 以 在 编译 时 计算 的 数值 。 只 要 没有 循 
环 从 属 关系 ,允许 常数 依赖 同一 程序 中 的 其 他 常数 。 

2. 域 

域 是 一 个 代表 和 某 对 象 或 类 相关 的 变量 的 成 员 。 域 可 以 是 静态 的 。 只 读 域 可 以 用 来 避 
免 错 误 的 发 生 。 对 于 一 个 只 读 域 的 赋值 ,只 会 在 相同 类 中 的 部 分 声明 和 构造 函数 中 发 生 。 

3. 方法 

方法 是 一 个 执行 可 以 由 对 象 或 类 完成 的 计算 或 行为 的 成 员 。 方 法 有 一 个 形式 参数 列表 
(可 能 为 空 ) 和 一 个 返回 数值 (或 void) ,并 且 可 以 是 静态 也 可 以 是 非 静态 。 静 态 方法 要 通过 
类 来 访问 。 非 静态 方法 ,也 称 为 实例 方法 ,通过 类 的 实例 来 访问 。 方 法 可 以 被 重复 调用 。 

4. 属性 

属性 是 提供 对 对 象 或 类 的 特性 进行 访问 的 成 员 。 属 性 的 例子 包括 字符 串 的 长 度 、 字 体 
的 大 小 、 窗 口 的 焦点 、 用 户 的 名 字 , 等 等 。 属 性 是 域 的 自然 扩展 。 两 者 都 是 用 相关 类 型 成 员 
命名 ,并且 访 问 域 和 属性 的 语法 是 相同 的 。 然 而 ,与 域 不 同 , 属 性 不 指示 存储 位 置 。 作 为 蔡 
代 , 属 性 有 存 取 程序 , 它 指定 声明 的 执行 来 对 它们 进行 读 或 写 。 
属性 是 由 属性 声明 定义 的 。 属 性 声明 的 第 一 部 分 看 起 来 和 域 声 明 相当 相似 。 第 二 部 分 
包括 一 个 get 存 取 程序 和 一 个 set 存 取 程序 。 

5. 事件 

事件 为 类 和 类 的 实例 提供 了 向 外 界 发 送 通知 的 能 力 。 一 个 类 通过 提供 事件 声明 来 定义 


275 
第 6 章 .NET 4.0 Web 应 用 程序 开发 技 | 


一 个 事件 ,这 看 起 来 与 域 的 声明 类 似 , 但 是 有 一 个 event 关键 字 。 这 个 声明 的 类 型 必须 是 
delegate 类 型 。 

6. 操作 符 

操作 符 是 一 个 定义 了 可 以 用 来 使 用 在 类 的 实例 上 的 表达 式 。 

7. 索引 器 (indexer) 

索引 器 是 使 得 对 象 可 以 像 数组 一 样 被 索引 的 成 员 。 属 性 使 类 似 域 的 访问 变 得 可 能 , 索 
引 器 则 使 得 类 似 数组 的 访问 变 得 可 能 。 索 引 器 的 声明 类 似 于 属性 的 声明 ,最 大 的 不 同 在 于 
索引 器 是 无 名 的 (由 于 this 是 被 索引 ,所 以 用 于 声明 中 的 名 称 是 this)。class 或 struct 只 人 允 
许 定 义 一 个 索引 器 ,而 且 索 引 器 总 是 包含 单个 索引 参数 。 索 引 参 数 在 一 对 方 括号 中 提供 ,用 
于 指定 要 访问 的 元 素 。 

8. 实例 构造 函数 (constructor) 

实例 构造 函数 是 实现 对 类 中 实例 进行 初始 化 的 行为 的 成 员 ,是 一 种 特殊 的 方法 。 它 与 
类 同名 ,能 获取 参数 ,但 不 能 返回 任何 值 。 每 个 类 都 必须 至 少 有 一 个 构造 函数 。 如 果 类 中 没 
有 提供 构造 函数 ,那么 编译 器 会 自动 提供 一 个 没有 参数 的 默认 构造 函数 。 

9. 析 构 函数 (destructor) 

析 构 函数 是 实现 破坏 一 个 类 的 实例 的 行为 的 成 员 。 析 构 函 数 完成 对 象 被 垃圾 回收 时 需 
要 执行 的 整理 工作 ,在 碎片 收集 时 会 自动 调用 。 在 C# 中 ,没有 提供 一 个 delete 操作 符 , 由 
运行 库 控制 何 时 摧毁 一 个 对 象 。 

析 构 函数 的 语法 是 首先 写 一 个 一 符号 ,然后 跟 上 类 名 。 析 构 函 数 不 能 有 参数 ,不 能 带 任 
何 访 问 修饰 符 ( 比 如 public) ,而 且 不 能 被 调用 。 不 能 在 一 个 struct 中 声明 析 构 函数 。 

10. 静态 构造 函数 

静态 构造 函数 是 实现 对 一 个 类 进行 初始 化 的 行为 的 成 员 。 静 态 构造 函数 不 能 有 参数 ， 
不 能 有 修饰 符 而 且 不 能 被 调用 , 当 类 被 加 载 时 ,类 的 静态 构造 函数 自动 被 调用 。 

11. 继承 (Inheritance) 

继承 是 面向 对 象 的 一 个 关键 概念 , 它 描述 了 类 之 间 的 一 种 关系 。 假 如 多 个 不 同 的 类 具 
有 大 量 通用 的 特性 ,而 且 这 些 类 相互 之 间 的 关系 非常 清晰 ,那么 使 用 继承 就 能 避免 大 量 重 复 
的 工作 。 类 支持 单 继承 ,System. Object 类 是 所 有 类 的 基 类 。 所 有 类 都 是 隐 式 地 从 System. 
Object 类 派生 而 来 的 。 

方法 、 属 性 和 索引 器 都 可 以 是 虚拟 (virtual) 的 ,这 意味 着 它们 可 以 在 派生 的 类 中 被 覆盖 
(override) 。 

可 以 通过 使 用 abstract 关键 字 来 说 明 一 个 类 是 不 完整 的 ,只 是 用 作 其 他 类 的 基 类 。 这 
样 的 类 被 称 为 抽象 类 。 抽 象 类 可 以 指定 抽象 函数 一 一 非 抽象 派生 类 必须 实现 的 成 员 。 

12. 接口 

接口 定义 了 一 个 连接 。 一 个 类 或 结构 必须 根据 它 的 连接 来 实现 接口 。 接 口 可 以 把 方 
法 、 属 性 .索引 器 和 事件 作为 成 员 。 类 和 结构 可 以 实现 多 个 接口 。 因 为 通过 外 部 指派 接口 成 
员 实现 了 每 个 成 员 , 所 以 用 这 种 方法 实现 的 成 员 称 为 外 部 接口 成 员 。 外 部 接口 成 员 可 以 只 
是 通过 接口 来 调用 。 
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13. 委派 

委派 (delegate) 是 指向 一 个 方法 的 指针 。 委 派 与 C++ 中 的 函数 指针 相似 ,与 函数 指针 不 
同 ,委派 是 类 型 安全 并 且 可 靠 的 。 委 派 是 引用 类 型 , 它 从 公共 基 类 System. Delegate 派生 出 
来 。 一 个 委派 实例 压缩 了 一 个 方法 一 一 可 调用 的 实体 。 对 于 静态 方法 ,一 个 可 调用 实体 由 
类 和 类 中 的 静态 方法 组 成 。 

委派 的 一 个 有 趣 而 且 有 用 的 特性 是 它 不 知道 或 不 关心 与 它 相关 的 对 象 的 类 型 。 对 象 所 
要 做 的 所 有 事情 是 方法 的 签名 和 委派 的 签名 相 匹 配 ,这 使 得 委派 很 适合 “匿名 ”调用 ,而 这 是 
个 很 有 用 的 功能 。 定 义 和 使 用 委派 分 为 3 步 : 声明 、 实 例 化 和 调用 。 用 delegate 声明 语法 
来 声明 委派 : delegate void SimpleDelegate(); 声 明了 一 个 名 为 SimpleDelegate 的 委派 , 它 
没有 任何 参数 并 且 返 回 类 型 为 void。 

14. 枚 举 

枚 举 类 型 的 声明 为 一 个 符号 常数 相关 的 组 定义 了 一 个 类 型 名 称 。 使 用 枚 举 可 以 使 代码 
更 可 读 还 可 以 自 归档 ,所 以 使 用 枚 举 比 使 用 整数 常数 要 好 。 

【 例 6.4】 声明 一 个 类 MyClass ,并 演示 如 何 对 它 进 行 实例 化 。 

using System; 

class MYClass 

2 MyClass() { // 构 造 函数 

Console. WriteLine("Constructor"); 
et MyClass(int value) { 
MyField = value; 


Console. WriteLine("Constructor"); 
i 


~MyClass() { // 析 构 函 数 
Console. WriteLine("Destructor"); 
} 
public const int MyConstant = 12; // 定 义 常量 
public int MyField = 34; 
public void MyMethod( ){ // 定 义 了 一 个 方法 


Console. WriteLine( "MyClass. MyMethod" ) ; 
} 
public int MyProperty { // 定 义 类 的 属性 
get { return MyField; } 
set { MyField = value; } 
| 
public int this[int index] { 
get { return 0;} 
set { 
Console. WriteLine("this[{0}] was set to {1}", index, value); 
} 
;; 
public event EventHandler MyEvent; 
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public static MyClass operator + (MyClass a, MyClass b) { 
return new MyClass(a. MyField + b.MyField); 
} 
internal class MyNestedClass{} 
} 
// 下 面 代码 将 访问 上 面 定 义 的 MyClass 类 
class Test 
{ static void Main() { 
MyClass a = new MYClass();// 调 用 构造 函数 
MyClass b = new MyClass(123); 
// 常 量 的 使 用 
Console. WriteLine("MyClass. MyConstant = {0}", MyClass.MyConstant); 
a. MyField++; // 域 的 用 法 
Console. WriteLine("a. MyField = {0}", a.MyField); 


a. MyMethod( ) ; // 调 用 方法 
a. MyProperty++;// 属 性 设置 
Console. WriteLine("a,. MyProperty = {0}", a.MyProperty); 


a[3] = a[1] = a[2];// 索 引 的 使 用 
Console. WriteLine("a[3] = {0}", a[3]); 
a. MyEvent + = new EventHandler(MyHandler);// 调 用 事件 
// Overloaded operator usage 
MyClass c =at+ bi 
} 
static void MyHandler(object sender, EventArgs e) { 
Console. WriteLine("Test. MyHandler" ); 
} 
internal class MyNestedClass{} 


选择 “开始 ”| “程序 ”| Microsoft VS 2010| Visual Studio Tools|j*VS 命令 提示 (2010)” 
菜单 ,出 现 VS 2010 


制 台 ,输入 notepad 后 按 回 车 键 , 将 上 述 代 码 复制 到 记事 本 中 ,存盘 为 


图 6-2 ”MyClass 类 运行 效果 
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6.2 常用 ASP. NET 控件 的 使 用 


VS 2010 集成 开发 环境 中 已 为 Web 的 开发 提供 了 一 个 工具 箱 , 目 的 是 将 控件 进行 分 类 
管理 ,以 方便 用 户 使 用 ,工具 箱 分 类 情况 如 表 6-6 所 示 。 


表 6-6 工具 箱 控件 
序号 控件 分 类 功能 描述 
1 Web 标准 控件 和 界面 设计 制作 有 关 的 控件 
2 数据 控件 数据 访问 、 操 作 以 及 数据 可 视 化 方面 控件 
3 验证 控件 对 用 户 输入 的 内 容 进行 验证 的 控件 
4 导航 控件 提供 站 点 导航 、 动 态 菜 单 . 树 型 菜单 的 控件 
5 登录 控件 用 户 登 录 界 面 的 设计 制作 控件 
6 Web Parts 控件 Web 门户 定制 控件 。 用 户 可 以 拖 动 某 一 区 域 在 屏幕 上 重新 布局 
六 HTML 控件 HTML 中 的 常规 控件 
8 


CrystalReports 控件 提供 Web 页 面 上 的 报表 处 理 


在 Web 开发 过 程 中 控件 可 分 为 客户 端 控 件 和 服务 端 控 件 。Web 页 面 中 的 客户 端 控件 
不 需要 Web 服务 器 参与 处 理 , Web 服务 器 将 带 有 控件 的 网 页 传送 到 客户 端 ,由 客户 端的 浏 
览 器 来 处 理 。 服 务 端 控 件 是 需要 Web 服务 器 参与 处 理 的 控件 ,它们 需要 占用 Web 服务 器 
的 内 存 .CPU、 磁 盘 缓 冲 区 、 硬 件 资源 等 ,最 终 转 变 成 客户 端 控件 ,传送 到 客户 端 浏 览 器 ,由 
客户 端的 浏览 器 来 处 理 。 

VS 2010 工具 箱 中 的 HTML 控件 既 可 以 作为 客户 端 控件 ,又 可 以 作为 服务 器 端 控件 ， 
其 他 控件 全 部 为 服务 器 端 控件 。 要 将 HTML 控件 从 客户 端 控 件 变 成 服务 器 端 控件 ,只 要 
加 上 runat 属性 即 可 。 例 如 定义 一 个 在 服务 器 端 执行 的 按钮 ,可 使 用 如 下 代码 : 


< input id = "button1" type = "button" value = "button" runat = "server" /> 


将 客户 端 HTML 控件 变 成 服务 器 端 控件 后 ,该 控件 的 使 用 效果 将 和 Web 标准 控件 中 
某 些 控件 类 似 。 可 以 用 Web 标准 控件 代替 服务 器 端的 HTML 控件 ,它们 在 编程 中 稍 有 
区 别 。 

在 使 用 控件 时 可 以 直接 双击 或 将 某 个 控件 元 素 用 鼠标 拖 到 工作 区 内 进行 设计 。 这 里 工 
作 区 既 可 以 是 “设计 ”也 可 以 是 “ 源 ”。 对 于 每 个 控件 元 素 我 们 可 以 单 击 该 控件 , 按 下 F4 键 ， 
出 现 对 应 的 属性 窗口 ,在 属性 窗口 中 来 设置 它 的 外 观 , 例 如 颜色 .大 小 .字体 等 ; 可 以 单 击 属 
性 窗口 中 的 “闪电 ?图 标定 义 该 控件 的 事件 响应 程序 。 

ASP. NET 的 常用 控件 主要 包括 服务 器 端 标准 控件 .服务 器 端 数据 控件 .服务 器 端 验证 
控件 。 在 这 里 我 们 不 对 每 个 控件 元 素 一 一 进行 介绍 ,只 是 对 在 设计 中 经 常会 使 用 到 的 一 些 
控件 元 素 进 行 简单 介绍 。 这 方面 的 专业 书籍 比较 多 ,有 兴趣 的 读者 可 参阅 其 他 资料 详细 了 
解 各 个 控件 的 使 用 。 


6.2.1 服务 器 端 标准 控件 
服务 器 端 标准 控件 是 最 常用 的 控件 。 在 ASP. NET 应 用 程序 中 ,服务 器 端 控 件 是 
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ASP. NET 内 惫 控件 。 在 添加 一 个 服务 器 端 控件 时 ,“ 源 ”中 会 自动 添加 “runat 二 server” 属 
性 ,以 便 与 客户 端 控件 区 分 ,而 且 标 记 的 前 缀 带 有 “asp:”, 例 如 定义 一 个 标签 控件 的 页 面 代 


码 为 : 


<asp:Label ID = "Labell" runat = "server" Text = "Label"></asp:Label> 


服务 器 端 控件 大 都 有 一 些 共同 的 属性 ,具体 说 明 如 表 6-7 所 示 。 


表 6-7 ”服务 器 端 控件 的 常见 属性 


序号 属 人 性 描 述 
该 属性 为 Font 类 型 值 ,用 于 设置 控件 显示 文本 的 字体 属性 。 包 括 粗 体 
站 Font (Bold)、 斜 体 (Italic)、 字体 (Name)、 上 划 线 (Overline)、 下 划 线 
(Underline) ,字体 大 小 (Size) ,醒目 线 (Strikeout) 等 设置 
ForeColor 该 属性 为 Color 类 型 值 ,用 于 设置 控件 的 前 景 颜色 , 即 显示 文字 的 颜色 
BackColor 设置 或 返回 控件 的 背景 颜色 
3 Height 、Width | 分 别 获取 或 设置 控件 的 高 度 和 宽度 
4 BorderColor 设置 或 返回 控件 的 边框 颜色 
5 BorderStyle 设置 或 返回 控件 的 边框 样式 
6 BorderWidth 设置 或 返回 控件 的 边框 的 宽度 
二 获取 或 设置 该 控件 的 键盘 快捷 键 。 例 如 将 按钮 控件 的 该 属性 设 为 D 后， 
用 户 可 用 Alt 十 D 快捷 键 直接 运行 按钮 的 单 击 事件 
8 人 获取 或 设置 控件 的 Tab 键 顺序 。 按 下 Tab 键 时 ,依据 此 值 的 大 小 顺序 移 
动 控 件 的 焦点 
9 Tooltip 获取 或 设置 将 鼠标 放 在 该 控件 上 所 显示 的 一 个 动态 提示 框 文本 
10 Visible 获取 或 设置 该 控件 是 否 可 见 
11 Enabled 获取 或 设置 该 控件 是 否 处 于 激活 状态 
12 EnableViewState| 在 服务 器 端 保存 控件 的 状态 ,包括 控件 的 属性 以 及 在 页 面 上 的 布局 等 
13 Text 该 属性 为 string 型 ,用 于 获取 或 设置 需要 在 该 控件 上 显示 的 文本 
瑞 Nt PoutBack 该 属性 为 布尔 型 ,用 鼠标 单 击 该 控件 或 控件 值 发 生变 化 时 是 否 马 上 回 传 
给 服务 器 进行 处 理 


当 某 控件 的 EnableViewState 属性 为 true 时 ,表示 该 控件 的 值 在 页 面 刷 新 或 回 传 重新 
显示 页 面 后 不 会 丢失 ,但 这 会 耗费 网 络 资源 和 服务 器 资源 。 因 此 车 页 面 回 传 后 无 须 执行 保 
值 处 理 时 应 设 为 false。 下 面 对 一 些 常 用 服务 器 端 控件 进行 简要 介绍 。 

1. Label 和 Literal 控件 

使 用 Label 控件 可 在 网 页 的 设置 位 置 上 显示 文本 ,可 以 通过 Text 属性 自 定义 显示 文 
本 。Text 属性 中 可 以 包含 其 他 HTML 元 素 ,Label 控件 转换 成 客户 端 HTML 代码 后 ， 
Label 就 成 了 二 span 盖 二 /span 二 , 即 该 控件 最 终 呈 现 一 个 span 元 素 ,例如 : 


<asp:Label ID = "Labell" runat = "server" Text = "<B> Im bold Font </B>"> 


</asp:Label > 


Literal 控件 和 Label 控件 类 似 ,但 它 不 可 向 文本 中 添加 任何 HTML 元 素 。 因 此 ， 
Literal 控件 不 支持 包括 位 置 属性 在 内 的 任何 样式 属性 。 转 换 成 客户 端 HTML 代码 后 ， 
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Literal 什么 标记 都 不 带 , 但 Literal 控件 允许 指定 是 否 对 内 容 进行 编码 。 
通常 情况 下 , 当 和 希望 文本 和 控件 直接 呈现 在 页 面 中 而 不 使 用 任何 附加 标记 时 ,可 使 用 
Literal 控件 。 
2. TextBox 文本 框 控件 
该 控件 用 于 获取 用 户 输入 的 文本 或 显示 文本 。 通 过 ReadOnly 属性 可 设置 该 控件 为 只 
读 , 而 不 能 对 其 中 的 文本 进行 编辑 修改 。Text 控件 常用 的 属性 如 表 6-8 所 示 。 
表 6-8 Text 控件 的 常用 属性 


序号 属 性 描 述 
1 Columns 以 字符 为 单位 的 文本 框 的 宽度 
2 MaxLength 文本 框 中 可 输入 的 最 大 字符 数 
3 TextMode 确定 文本 框 的 行为 模式 是 单行 文本 框 (SingleLine)、 多 行文 本 框 
(MultiLine) ,还 是 密码 编辑 框 (Password) 
4 Rows 设置 多 行文 本 框 显示 的 行 数 。 该 属性 仅 对 多 行文 本 框 起 作用 
5 MaxLength 该 属性 是 int 类 型 值 ,用 于 设置 TextBox 控件 中 输入 的 最 大 字符 数 
6 ReadOnly 该 属性 为 bool 类 型 值 ,用 于 设置 TextBox 控件 中 的 内 容 是 否 为 只 读 
7 Text 该 属性 为 string 类 型 值 , 用 于 获取 或 设置 TextBox 控件 中 的 文本 
3. Image 控件 


该 控件 是 用 来 插入 图 片 的 ,常用 的 属性 如 表 6-9 所 示 。 
表 6-9 Image 控件 常用 的 属性 


序号 属 性 描 述 
1 AlternateText 在 图 片 不 存在 或 尚未 下 载 完 的 时 候 显 示 车 换 的 文本 
党 DescriptionUrl 指定 更 详细 图 像 说 明 的 URL 
3 ImageAlign 该 属性 用 于 设置 或 获取 Image 控件 与 网 页 其 他 对 象 的 对 齐 方式 。 例 如 左 
对 齐 、 右 对 齐 、 基 底 、 顶 端 \ 中 间 等 
4 ImageUrl 获取 或 设置 图 片 来 源 的 相对 或 绝对 位 置 


4. Button、LinkButton、lImageButton 控件 

这 3 个 控件 分 别 表示 普通 按钮 ` 超 链接 形式 的 按钮 和 图 像 按钮 。 它 们 是 Web 开发 中 相 
当 重 要 的 控件 ,允许 用 户 通过 单 击 来 执行 操作 。 每 当 用 户 单 击 按钮 时 , 即 调用 Click 事件 处 
理 程序 。 可 将 代码 放 入 Click 事件 处 理 程序 来 执行 所 选择 的 操作 。 这 3 个 控件 常用 的 属性 
如 表 6-10 所 示 。 


表 6-10 Button .LinkButton ,ImageButton 常用 的 控件 属性 


序号 属 性 描 述 
i OnClientClick 输入 客户 端 代码 ,可 以 在 单 击 按钮 后 先 从 客户 端 执行 此 代码 ,然后 
再 执行 服务 器 端的 响应 事件 。 例 如 输入 alert('ok”) 后 , 先 显示 一 个 
对 话 框 ,然后 再 执行 服务 器 端 事 件 程序 
2 CommandName 为 该 按钮 设 定 一 个 关联 命令 。 具 体 使 用 方法 见 例 6.5 
3 CommandArgument 为 该 按钮 设 定 关联 命令 的 参数 
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【 例 6.5】 该 例 演示 了 如 何 使 用 CommandName、CommandArgument 属性 来 识别 用 户 
按 下 了 哪个 按钮 。 每 个 按钮 调用 相同 的 CommandBtn_Click 事件 程序 。 文 件 ex_6_5. aspx 
内 容 如 下 : 


<$ @ Page Language = "C#" RutoEventWireup = "true" CodeFile= "ex 6 5.aspx.cs" Inherits= "ex 
图 全 
<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 
< htm]l xmlns = "http://www.w3. org/1999/xhtml"> 
< head runat = "server"> <title> 无 标题 页 </title></head> 
<body> 
< form id = "forml" runat = "server"> 
< h3> Button CommandName Example </h3> 
Click on one of the command buttons.<br><br> 
<asp:Button ID = "Button1”Text = "Sort Ascending" CommandName = "Sort" 
CommandArgument = "Ascending" OnCommand = "CommandBtn Click" runat = "server" /> é&nbsp; 
<asp:Button ID = "Button2" Text = "Sort Descending" CommandName = "Sort" 
CommandArgument = "Descending" OnCommand = "CommandBtn Click" runat = "server" /><br><br> 
<asp:Button ID = "Button3" Text = "Submit" CommandName = "Submit" OnCommand = 
"CommandBtn Click" runat = "server" /> gnbsp; 
<asp:Button ID= "Button4" Text = "Unknown Command Name" CommandName = 
"UnknownName" CommandArgument = "UnknownArgument" OnCommand = 
"CommandBtn Click" runat = "server" /> &nbsp; <asp:Button ID = "Button5" 
Text = "Submit Unknown Command Argument" CommandName = "Submit" 
CommandArgument = "UnknownArgument" OnCommand = "CommandBtn Click" 
runat = "server" /> 
<br><br><asp:Label ID = "Message" runat = "server" /> 
</form> 
</body> 
</html > 


文件 ex_6_5. aspx. cs 内 容 如 下 : 


using System; 

using System. Data; 

using System. Configuration; 

using System. Collections; 

using System. Web; 

using System. Web. Security; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

using System. Web. UI. WebControls. WebParts; 
using System. Web. UI. HtmlControls; 


public partial class ex 6 5 : System. Web. UI. Page 
protected void CommandBtn Click(Object sender, CommandEventArgs e) 
{ 
Switch (e. CommandName) 
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case "Sort": 
// Call the method to sort the list 
Sort List((String)e.CommandArgument); 
break; 
case "Submit": 
// Display a message for the Submit button being clicked 
Message. Text = "You clicked the Submit button"; 
// Test whether the command argument is an empty string ("") 
if ((String)e. CommandArgument == "") 
{ // End the message. 
Message. Text + = "."; 
1 
else 
{ //Display an error message for the command argument 
Message. Text + = ", however the command argument is not 
recogized. "; 
} 
break; 
default: 
// The command name is not recognized. Display an error message 
Message. Text = "Command name not recogized."; 
break; 


} 
protected void Sort_ List(string commandArgument) 
{ 
Switch (commandRrgument) 
{ case "Ascending": 
// Insert code to sort the list in ascending order here 
Message. Text = "You clicked the Sort Ascending button."; 
break; 
case "Descending": 
// Insert code to sort the list in descending order here 
Message. Text = "You clicked the Sort Descending button."; 
break; 
default: 
// The command argument is not recognized. Display an error message 
Message. Text = "Command argument not recogized."; 
break; 


5. HyperLink 控件 
该 控件 用 于 制作 文本 或 图 片 超级 链接 。 常 用 的 属性 如 表 6-11 所 示 。 
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表 6-11 HyperLink 控件 常用 的 属性 


序号 属 性 描 述 
1 ImageUrl 该 属性 用 于 获取 或 设置 HyperLink 控件 链接 源 的 来 源 , 若 设置 它 
的 属性 ,表示 HyperLink 控件 为 图 片 超 链 接 
名 NavigateUrl 获取 或 设置 HyperLink 控件 链接 的 网 页 或 网 址 
3 eat 获取 或 设置 HyperLink 控件 被 单 击 时 ,其 所 链接 的 网 页 将 在 哪个 
框架 或 窗口 打开 (用 于 框架 网 页 ) 


6. RadioButton 单 选 按钮 

该 控件 为 用 户 提供 由 两 个 或 多 个 互 斥 选 项 组 成 的 选项 集 。 当 用 户 选择 某 单 选 按钮 时 ， 
同一 组 中 的 其 他 单 选 按钮 不 能 同时 被 选 定 。 当 单 击 RadioButton 按钮 时 ,其 Checked 属性 
设置 为 true, 并 且 调 用 Click 事件 处 理 程序 。 当 Checked 属性 的 值 更 改 时 ,将 引发 Checked- 
Changed 事件 。 用 户 可 以 通过 用 Text 属性 设置 控件 内 显示 的 文本 。RadioButton 控件 常 
用 的 属性 如 表 6-12 所 示 。 


表 6-12 RadioButton 控件 的 常用 属性 


序号 属 性 描 述 
1 GroupName 将 多 个 单 选 钮 指定 为 同一 组 的 组 名 。 这 样 就 构成 了 互 斥 选项 
2 Checked 该 属性 为 bool 类 型 ,用 于 确定 某 一 个 单 选 按钮 是 否 被 选中 
3 TextAlign 文本 标签 的 对 齐 方式 


7. CheckBox 复 选 框 

该 控件 通常 成 组 使 用 ,以 达成 构建 多 重 选项 的 目的 。 这 个 控件 与 RadionButton 控件 相 
比 ,它们 的 相似 之 处 在 于 都 是 用 于 指示 用 户 所 选 的 选项 ,不 同 之 处 在 于 , 单 选 框 一 次 只 能 选 
一 个 按钮 ,而 复 选 框 则 可 以 选择 任意 数量 的 。CheckBox 控件 常用 的 属性 如 表 6-13 所 示 。 


表 6-13 CheckBox 控件 常用 的 属性 


序号 属 性 描 述 
1 Checked 该 属性 为 bool 类 型 ,用 于 确定 某 一 个 复 选 按钮 是 否 被 选中 
这 Text 该 属性 是 string 类 型 值 ,用 于 设置 与 复 选 按钮 相关 的 标签 
3 TextAlign 文本 标签 的 对 齐 方式 


【 例 6.6】 CheckBox 控件 界面 设计 。ex_6_6. aspx 文件 代码 如 下 : 


< 外 @ Page Language = "C#" AutogventWireup= "true" CodeFile= "ex 6 6.aspx.cs" Inherits= "ex 
_6_6"%> 

<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 

< html xmlns = "http://www. w3. org/1999/xhtml"> 

<head id= "Head1" runat = "server"> <title> TextBox 控件 输入 样式 效果 </title> </head> 
<body> <center> 
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< form id= "forml" runat = "server"> 

<div> 
<asp:CheckBox ID = "CheckBox1" runat = "server" Text = "学 院 " /> &nbsp; 
Snbsp; 
<asp:CheckBox ID = "CheckBox2" runat = "server" Text =" 专 业 " /> gnbsp; 
<asp:CheckBox ID = "CheckBox3" runat = "server" Text = " 班 ” 级 " /><br /> 


<br /> 
<asp:Button ID = "Button1" runat = "server" OnClick = "Buttonl_Click" 
Text = "选择 " /> 
</div> 
</form></center > 
</body> 
</html > 


ex_6_6. aspx. cs 文件 的 代码 如 下 : 


using System; 
using System. Data; 
using System, Configuration; 
using System, Web; 
using System. Web. Security; 
using System. Web. UI; 
using System. Web. UI. WebControls; 
using System. Web. UI. WebControls. WebParts; 
using System. Web. UI. HtmlControls; 
public partial class ex 6 6 : System. Web. UI. Page 
{ // 单 击 <asp:Button> 控 件 时 触发 事件 
protected void Buttonl_Click(object sender, EventArgs e) 
{ 
if (CheckBox1. Checked) 
Response. Write(" 您 选择 了 " + "'" + CheckBoxl.Text + ""); 
Response. Write( "< br/>"); 
if (CheckBox2. Checked) 
Response. Write( "您 选择 了 " + "'" + CheckBox2.Text + ""); 
Response. Write("< br/>"); 
if (CheckBox3. Checked) 
Response. Write( "您 选择 了 " + "'" + CheckBox3.Text + "'"); 


8. DropDownList 控件 

DropDownList 控件 使 用 户 可 以 从 下 拉 列 表 框 中 进行 选择 。DropDownList 控件 与 下 
面 将 要 介绍 的 ListBox 控件 非常 相似 ,不 同 之 处 在 于 其 选择 项 列表 在 用 户 单 击 下 拉 按 钮 前 一 
直 保 持 隐藏 状态 。 同 时 它 不 支持 多 重 选择 。DropDownList 控件 常用 属性 及 说 明 如 表 6-14 
所 示 。 
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表 6-14 DropDownList 控件 的 常用 属性 及 说 明 


序 号 属 性 说 明 
1 DataSource 获取 或 设置 对 象 数据 源 
2 DataTextField 获取 或 设置 为 列表 项 提供 文本 内 容 的 数据 源 字段 
9 DataValueField 获取 或 设置 为 各 列表 项 提供 值 的 数据 源 字段 
4 SelectedIndex 获取 或 设置 DropDownList 控件 中 的 选 定 项 的 索引 
5 SelectedItem 获取 列表 控件 中 索引 最 小 的 选 定 项 
6 SelectedValue 获取 列表 空间 中 选 定 项 的 值 
7 Text 获取 或 设置 DropDownList 空间 的 SelectedValue 属性 


该 控件 在 设计 时 就 可 以 确定 下 拉 选 项 内 容 , 也 可 从 其 他 数据 源 得 到 下 拉 列 表 内 容 。 当 
添加 该 控件 到 “设计 ”界面 时 ,会 出 现 DropDownList 任务 对 话 框 。 鼠 标 右 击 该 控件 在 出 现 
的 快捷 菜单 中 ,选择 “显示 智能 标志 ?也 会 出 现 DropDownList 任务 对 话 框 。 对 话 框 中 具有 
“选择 数据 源 ”" 和 “编辑 项 ”两 项 功能 。“ 选 择 数 据 源 ”可 以 以 向 导 方 式 指定 下 拉 列 表 的 数据 
源 。 选 择 “ 编 辑 项 ”后 出 现 “Listltem 集合 编辑 器 ”对 话 框 ,如 图 6-3 所 示 。 


ListItem 集合 篇 加 器 


6-3 ListItem 集合 编辑 器 


单 击 “ 添 加 ”按钮 实际 上 就 增加 了 一 条 下 拉 列 表 行 ,该 行 被 处 理 成 Listltem 对 象 , 它 有 
4 个 属性 ,如 表 6-15 所 示 。 


表 6-15 ListItem 对 象 的 属性 及 说 明 


序 号 属 性 说 明 
1 Enabled 如 果 设 置 成 false 则 该 条 下 拉 行 将 被 隐藏 ,不 出 现在 下 拉 框 中 
2 Selected 是 否 将 该 行 作 为 选 定 行 
3 Text 该 行 的 文本 标签 
4 Value 与 该 行文 本 标签 对 应 的 值 ,其 值 可 与 text 相同 ,也 可 不 同 。 例 如 


text 为 男 ,而 value 为 0, 也 即 用 0 表示 性 别 为 男 


实际 上 ,在 VS 2010 中 可 以 使 用 ListItem 集合 编辑 器 的 控件 还 有 ListBox、RadioButtonList、 
CheckBoxList、BulletedList 控件 ,它们 的 用 法 大 臻 相似。 
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【 例 6.7】 该 例 向 DropDownList 控件 添加 固定 的 3 条 选项 ,然后 通过 单 击 按钮 Add 
Item 为 下 拉 控 件 动态 增加 一 条 可 选项 ; 单 击 按钮 Delete Item ,删除 一 条 选中 的 下 拉 项 ; 单 
击 按钮 Display Item 显示 选中 的 下 拉 项 内 容 。ex_6_7. aspx 文件 代码 如 下 : 


< 外 四 Page Language = "C 井 ”RutoEventWireup = "true" CodeFile = "ex 6 _7.aspx.cs" Inherits= 
"ex 6 7"%> 
<! DOCTYPE html PUBLIC " - //W3C//DID XHTML 1.0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 
< htm]l xmlns = "http://www.w3.org/1999/xhtml"> 
< head id = "Headl" runat = "server"><title> DropDownList 控件 输入 样式 效果 </title > </head> 
<body> 
<form id = "forml" runat = "server"> 
<asp:DropDownList ID= "DropDownList1" runat = "server"> 
<asp:ListItem Value = "1"> 财 政 与 公共 管理 学 院 </asp:ListItem> 
<asp:ListItem Value = "2"> 工 商 管理 学 院 </asp:ListItem> 
<asp:ListItem Value = "3"> 管 理科 学 与 工程 学 院 </asp:ListItem> 
</asp:DropDownList><br />< br /> 
<asp:Button ID = "Button1”runat = "server”OnClick = "Buttonl Click" 
Text = "Rdd Item" /> 
<asp:Button ID = "Button2" runat = "server" OnClick = "Button2_Click" 
Text = "Delete Item" /> 
<asp:Button ID = "Button3" runat = "server" OnClick = "Button3_Click" 
Text = "Display Item" /> 
</form> 
</body> 
</html > 


ex_6_7.aspx. cs 文件 代码 如 下 : 


using System; 

using System. Data; 

using System. Configuration; 

using System. Collections; 

using System. Web; 

using System. Web. Security; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

using System. Web. UI. WebControls. WebParts; 
using System. Web. UI. HtmlControls; 


public partial class ex 6 7 : System. Web. UI.Page 
Protected void Buttonl Click(object sender, EventArgs e) 
{ // 添 加 一 个 新 的 下 拉 项 
ListItem 1i= new ListItem(" 计 算 机 学 院 ","5"); 
DropDownList1. Items. Add(1i); 
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protected void Button2 Click(object sender, EventArgs e) 
{ // 删 除 下 拉 列 表 框 中 已 被 选中 的 项 
DropDownList1. Items. Remove(DropDownList1. SelectedItem); 
i 
protected void Button3 Click(object sender, EventArgs e) 
{ // 显 示 下 拉 列 表 框 中 被 选中 项 的 文本 和 对 应 的 值 
Response. Write(DropDownList1. SelectedItem. Text + DropDownList1. 
SelectedItem. Value); 


9. ListBox 列表 框 
列表 框 通过 显示 多 个 选项 供用 户 选 择 达 到 与 用 户 对 话 的 目的 ,如 果 候 选项 较 多 的 时 候 


它 还 可 以 自动 地 加 上 滚动 条 。 我 们 可 以 通过 设置 列表 框 的 Items 属性 来 添加 列表 框 的 内 


容 。 


在 属性 菜单 中 找到 Items 选项 , 单 击 右 边 的 按钮 ,会 弹出 如 前 所 述 的 ListItem 集合 编辑 


器 ,之 后 就 可 方便 地 添加 列表 框 中 的 每 一 项 。ListBox 控件 常用 的 属性 如 表 6-16 所 示 。 


表 6-16 ”ListBox 控件 的 常用 属性 


序 号 属 性 描 述 

DataSource 为 ListBox 控件 设置 数据 源 

2 SelectIndex int 类 型 值 ,用 于 指示 ListBox 控件 当前 选中 的 索引 值 。 注 意 索引 是 从 0 
开始 的 

3 SelectedItem Object 类 型 值 ,用 于 指示 ListBox 控件 当前 选中 的 项 。 它 与 SelectIndex 
属性 的 区 别 在 于 ,SelectIndex 表示 当前 选中 项 的 索引 ,而 SelectItem 表示 
的 是 当前 选中 项 本 身 

4 SelectedValue 返回 列表 控件 中 选 定 项 的 值 

10. FileUpload 文件 上 载 控 件 

该 控件 可 让 用 户 在 客户 端 选择 一 个 文件 ,然后 放 到 Web 服务 器 的 某 个 指定 的 文件 夹 

下 。 具 体 使 用 方法 请 看 下 例 。 


【 例 6.8】 该 例 让 用 户 从 客户 端 选择 一 个 图 片 文件 ,限定 其 只 能 是 jpg/bmp/gif/png/ 


swf 文件 ,大 小 不 超过 25KB, 图 片 尺寸 长 宽 在 190X130 以 内 。ex_6_8. aspx 文件 内 容 如 下 : 


<%@ Page Language = "C#" AutogventWireup = "true" CodeFile = "ex_6_8. aspx. cs”Inherits = 
"ex 6 8"%> 
<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1. 0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 
< htm]l xmlns = "http://www.w3.org/1999/xhtml"> 
< head runat = "server"> <title> 上 载 文 件 示例 </title></head> 
<body> 
< form id = "forml" runat = " server"> 
<asp:FileUpload ID = "FileUp" runat = "server" /> 
<asp:Button ID = "Buttonl1" runat = "server" OnClick = "Buttonl Click" 
Text = "upload" /> 
</form> 
</body> 
</html > 
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ex_6_8. aspx. cs 文件 内 容 如 下 : 


using System; 

using System. Data; 

using System. Conf iguration; 

using System. Collections; 

using System. Web; 

using System. Web. Security; 

using System. Web. UI; 

using System. Web. UI. WebControls; 
using System. Web. UI. HtmlControls; 


public partial class ex 6 8 : System.Web. UI.Page 
{ 
protected void Button1_Click(object sender, EventArgs e) 
{ ”// 得 到 上 载 文 件 路 径 名 和 文件 名 
string fullname = FileUp.PostedFile.FileName.ToString().Trim(); 
if (fullname == "" 
{ this.Response.Write("< script language = 'javascript'> alert(' 请 选择 
要 上 载 的 图 片 文件 ! ')</script >"); 
return; 


} 


// 得 到 上 载 文件 的 文件 名 
string filename = this.FileUp.FileName.ToString() 7 
// 从 上 载 文 件 名 中 得 到 文件 类 型 
string filetype = fullname.Substring(fullname. LastIndexOf(".") + 1); 
// 将 文件 扩展 名 转化 为 小 写字 符 
string Ext = filetype.ToLower(); 
// 判 断 上 载 的 文件 是 否 为 图 片 文件 , 若 不 是 图 片 文件 将 不 予 处 理 
证 (Ext == "jpg" || Ext == "bmp" || Ext == "gif" || Ext == "png" || Ext == 
{ 
// 指 定 上 载 文 件 在 Web 服务 器 上 的 存放 位 置 
string UploadedFile = Server.MapPath(".") + "\\" + filename; 
// 上 传 到 Web 服务 器 主 目录 下 
FileUp. PostedFile. SaveAs(UploadedFile); 
try 
{ // 动 态 构建 一 个 图 像 ,目的 是 取得 图 片 的 宽度 和 高 度 
System. Drawing. Image mylImage = System. Drawing. Image.FromFile 


(UploadedFile); 
int myLength = FileUp. PostedFile.ContentLength; // 图 像 文件 大 小 
int myWidth = mylImage. Width; // 图 像 宽度 
int myHeight = mylImage.Height; // 图 像 高 度 
mylImage. Dispose( ); // 从 内 存 中 去 除 图 像 


if (myLength > 25600 | | myWidth > 190 | | myHeight > 130) 


"swf") 


{ ”System. I0. File.Delete(UploadedFile); ”// 删 除 已 经 上 载 的 图 片 文件 


Response. Write( "< script language = 'javascript'>alert(' 上 传 


图 片 规格 错误 . 图片 应 小 于 25K, 长 宽 在 190x130 以 内 . ')</script >"); 


return; 
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else 
{ 
Response. Write("< script language = 'javascript'>alert(' 上 传 图 片 成 功 ! ') 
</script >"); 
return; 
3 


1 
catch 


{ 
Response. Write( "< script language = 'javascript'>alert(' 上 传 图 片 规格 错误 ! ') 
</script >"); 
return; 
} 
} 
else 
{ 
Response. Write( "< script language = 'javascript'> 
alert(' 请 选择 图 片 文件 (jpg/bmp/gif/png/swf)!')</script >"); 


return; 


11. Panel 和 Placeholder 控件 

Panel 和 Placeholder 控件 都 属于 容器 控件 。 所 谓 容器 控件 是 指 该 控件 可 以 动态 容纳 其 
他 控件 或 HTML 元 素 。 比 如 要 在 运行 时 刻 向 Web 页 面 中 动态 添加 内 容 , 即 可 利用 容器 控 
件 来 实现 。 

Panel 和 Placeholder 控件 ( 占 位 控件 ?转换 成 客户 端 HTML 代码 后 ,呈现 为 div 元 素 。 
Placeholder Web 服务 器 控件 可 以 将 空 的 容器 控件 放置 到 页 内 ,然后 在 运行 时 动态 添加 、 删 
除 子 元 素 等 。 该 控件 只 呈现 其 子 元 素 , 不 具有 自己 的 基于 HTML 的 输出 。 

Panel 服务 器 控件 最 终 在 客户 端 呈 现 为 div 元 素 , 但 在 Web 开发 时 允许 用 户 在 该 控件 
中 添加 其 他 控件 ,而 且 在 运行 过 程 中 也 允许 动态 添加 控件 。 

【 例 6.9】 在 aspx 页 面 中 放置 一 个 Panel 控件 ,其 中 放 入 一 个 CheckBox 和 Place- 
holder 控件 。 单 击 CheckBox 后 ,可 在 Placeholder 和 Panel 中 增加 新 的 数目 可 变 的 控件 。 
ex_6_9. aspx 文件 内 容 如 下 : 


<% @ Page Language = "C#" RutoEventWireup = "true" CodeFile= "ex 6 9.aspx.cs" Inherits = "ex 
_6 8"%> 
<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 
<html> 
< head runat = "server"> <title> 无 标题 页 </title></head> 
<body> 
<form id= "forml" runat = "server"> 

< asp: Panel ID= "Panell" runat = "server" Height = "214px" Width = "208px" BackColor = 
" 提 FEFFFCO" 

BorderStyle = "Groove"> 
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< asp: CheckBox ID = "CheckBoxl"” runat = " server"” Text = "查看 回复 ”OnCheckedChanged = 

"CheckBox1_CheckedChanged"”RutoPostBack = "True" /><br /> 

<asp:PlaceHolder ID = "PlaceHolder1" runat = "server"></asp:PlaceHolder > 

<br /> 

</asp:Panel > 

</form> 
</body> 
</html > 


ex_6_9. aspx. cs 文件 代码 如 下 : 


using System; 

using System. Data; 

using System. Configuration; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 
using System, Web. UI. HtmlControls; 


public partial class ex 6 8 : System. Web. UI. Page 
| 
protected void CheckBoxl1 CheckedChanged(object sender, EventArgs e) 
{ if (CheckBox1. Checked) 
{  // 为 PlaceHolder 动态 增加 Literall .TextBoxl 和 Buttonl 这 3 个 控件 
Literal Literall = new Literal(); 
Literall. Text = "<br > 回复 内 容 :"; 
PlaceHolder1. Controls. Add(Literall); 


TextBox TextBoxl = new TextBox(); 

TextBox1. Columns = 50; 

TextBoxl. Rows = 20; 

TextBox1. TextMode = System. Web. UI. WebControls. TextBoxMode. 
MultiLine; 

TextBox1. Font. Bold = true; 

PlaceHolder1. Controls. Add( TextBox] ); 

TextBox1. BorderColor = System.Drawing. Color. Red; 

TextBoxl. Text = "This is my reply"; // 可 从 数据 库 得 到 


Button Buttonl = new Button(); 

Buttonl. Text = "我 要 回复 "; 

PlaceHolder1. Controls. Add(Button1); ” // 可 增加 单 击 事件 的 编程 实现 
// 为 Panel 动态 增加 Literal2 和 TextBox2 两 个 控件 

Literal Literal2 = new Literal(); 

Literal2. Text = "< br > 请 输入 姓名 :"; 

Panel1. Controls. Add(Literal2); 


TextBox TextBox2 = new TextBox(); 
TextBox2. Columns = 20; 
TextBox2. Font. Bold = true; 
Panell. Controls. Add( TextBox2); 
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6.2.2 服务 器 端 验证 控件 


服务 器 端 验证 控件 是 ASP. NET 控件 中 新 产生 的 一 类 验证 控件 。 当 用 户 输入 错误 时 ， 
验证 控件 可 以 显示 错误 信息 。 验 证 控件 在 正常 工作 情况 下 是 不 可 见 的 ,只 有 当 用 户 输入 数 
据 有 误 时 ,它们 才 是 可 见 的 。 服 务 器 端 验 证 控件 包含 如 表 6-17 所 示 的 6 种 验证 控件 。 验 证 
控件 的 公共 属性 如 表 6-18 所 示 。 


表 6-17 验证 控件 
序号 控件 名 称 说 明 

1 RequiredFieldValidator 输入 值 域 是 否 为 空 

2 RangeValidator 输入 值 域 是 否 在 指定 范围 内 

EF RegularExpressionValidator 输入 值 域 是 否 符合 某 正则 表达 式 要 求 的 格式 

4 CompareValidator 输入 值 和 另外 一 个 值 满足 什么 关系 

5 CustomValidator 定制 的 验证 检查 方式 

6 ValidationSummary 检验 其 他 验证 控件 的 结果 并 集中 显示 

表 6-18 验证 控件 的 公共 属性 
序号 控件 名 称 说 明 

1 ControlToValidate 指定 一 个 控件 ID, 该 控件 需要 进行 输入 验证 

2 ErrorMessage 用 来 显示 错误 信息 

3 ForeColor 指定 错误 信息 显示 时 的 颜色 

4 Display 指定 验证 控件 的 错误 信息 如 何 显示 。Display 二 "Static", 即 静 
态 显示 方式 (系统 默认 方式 )。 当 验证 控件 初始 化 时 ,需要 在 
网 页 上 有 足够 的 空间 来 放置 验证 控件 。 当 没有 显示 错误 信息 
时 ,验证 控件 仍然 占据 一 定 的 网 页 位 置 。Display = 
"Dynamic", 即 动态 显示 方式 。 当 验证 控件 初始 化 时 ,控件 不 
再 占有 网 页 上 的 位 置 ,只 有 在 需要 显示 错误 信息 时 ,控件 才 会 
占有 一 定 的 网 页 位 置 。Display 王 "None", 即 不 在 当前 验证 控 
件 中 显示 错误 信息 ,而 在 页 面 的 总 结 验证 控件 ValidationSummary 
中 显示 错误 信息 

5 EnableClientScript 是 否 启动 客户 端 验证 ,默认 值 为 true。 若 为 false 则 启动 Web 


服务 器 来 验证 。 采 用 客户 端 验证 可 得 到 较 快 的 处 理 速度 


1. RequiredFieldValidator 控件 

该 控件 又 称 非 空 验证 控件 ,常用 于 文本 输入 框 的 非 空 验证 。 若 在 网 页 上 使 用 此 控件 , 则 
当 用 户 提 交 网 页 到 服务 器 端 时 ,系统 自动 检查 被 验证 控件 的 输入 是 否 为 空 。 如 果 为 空 , 则 网 
页 显示 错误 信息 。RequiredFieldValidator 控件 使 用 方法 如 下 : 

<asp:RequiredFieldValidator id = "控件 名 称 " runat = "server" ControlToValidate = "要 检查 的 控 


件 名 " ErroeMessage = "错误 消息 " Display = "Static | Dynamic | None" > 文本 信息 </asp: 
RequiredFieldValidator > 


2. RangeValidator 控件 
该 控件 又 称 范围 验证 控件 。 当 用 户 输入 不 在 验证 范围 内 的 值 时 将 引发 页 面 错误 消息 。 
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该 控件 提供 Integer、String、Date、Double 和 Currency 共 5 种 验证 。RangeValidator 控件 的 
使 用 方法 如 下 : 


<asp:RangeValidator id= "控件 名 称 " runat = "server"” ControlToValidate = "要 验证 
的 控件 名 "Type = "数据 类 型 " MinimumValue = "最 小 值 " MaximumValue = "最 大 值 " 
ErrorMessage = "错误 信息 " Display = "Static|Dynamic|None"> 文 本 信息 </asp: 
RangeValidator > 


3. RegularExpressionValidator 控件 


该 控件 又 称 正则 表达 式 验 证 控件 , 它 的 验证 功能 比 非 空 验证 控件 和 范围 验证 控件 更 强大 ,用 
户 可 以 自 定义 或 书写 自己 的 验证 表达 式 。RegularExpressionValidator 控件 的 使 用 方法 如 下 : 


<asp:RegularExpressionValidator id = "控件 名 称 " runat = "server" 
ControlToValidate = "要 验证 的 控件 名 ”ValidationExpression = "正则 表达 式 " 
ErrorMessage = "错误 信息 " Display = "Static|Dynamic|None"> 文 本 信息 </asp: 
RegularExpressionValidator > 


4. CompareValidator 控件 
该 控件 又 称 比较 验证 控件 ,主要 用 来 验证 TextBox 控件 内 容 或 者 某 个 控件 的 内 容 与 某 
固定 表达 式 的 值 是 否 相 同 。CompareValidator 控件 的 使 用 方法 如 下 : 


<asp:CompareValidator id= "控件 名 称 " runat = "server”ControlToValidate = "要 验证 的 控件 名 " 
ValueToCompare = " 常 值 ” ControlToCompare = " 作 比 较 的 控件 名 ”Type = "输入 值 ” Operator = " 操 
作 方 法 ”ErrorMessage = "错误 信息 ”Display =" Static | Dynamic | None" > 文本 信息 </asp: 
CompareValidator > 


5. CustomValidator 控件 

该 控件 又 称 自 定义 验证 控件 , 它 使 用 自 定义 的 验证 函数 来 作为 验证 方式 。 
CustomValidator 控件 与 其 他 验证 控件 的 最 大 区 别 是 该 控件 可 以 添加 客户 端 验证 函数 和 服 
务 器 端 验证 函数 。 客 户 端 验证 函数 总 是 在 ClientValidatorFunction 属性 中 指定 的 ,而 服务 
器 端 验证 函数 总 是 通过 OnServerValidate 属性 来 设 定 ,并 被 指定 为 ServerValidate 事件 处 
理 程序 。CustomValidator 控件 的 使 用 方法 如 下 : 


<asp:CustomValidator id= "控件 名 称 ”runat = "server”ControlToValidate = "要 验证 的 控件 名 " 
ErrorMessage = "错误 信息 " Display = "Static|Dynamic|None"> 文 本 信息 </asp:CustomValidator > 


6. ValidationSummary 控件 


该 控件 又 称 错 误 总 结 控件 ,主要 是 收集 本 页 中 所 有 验证 错误 信息 ,并 将 它们 组 织 好 后 显 
示 出 来 ,其 使 用 方法 如 下 : 


<asp:ValidationSummary id= "控件 名 称 " runat = "server" HeaderText = " 头 信息 " 
ShowSummary = "True|False" 
Display = "List|BulletList|SingleParagraph"></asp:ValidationSummary > 
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其 中 ShowSummary 一 "True" 表 示 在 该 页 中 显示 摘要 信息 ,否则 以 对 话 框 方式 显示 摘要 信 
息 。Display 确定 摘要 的 显示 方式 。 

【 例 6.10】 使 用 RequiredFieldValidator 控件 控制 必须 输入 班级 编号 ,当班 级 编号 为 
空 时 显示 “班级 编号 不 能 为 空 ”的 字样 ; 用 RangeValidator 控件 控制 用 户 输入 的 班级 编号 必 
须 在 1 一 9 之 间 ; 利用 RegularExpressionValidator 控件 检验 用 户 输入 的 URL 地 址 和 
E-mail 地 址 是 否 规范 ; 用 CompareValidator 控件 检查 用 户 输入 两 次 密码 的 值 是 否 相 同 ; 使 
用 ValidationSummary 控件 将 验证 后 的 结果 以 对 话 框 方式 显示 。ex_6_10. aspx 文件 如 下 : 


<$ 四 Page Language = "C 井 ”RutoEventWireup = "true" CodeFile = "ex 6 10.aspx.cs" Inherits = 
"ex_6_10" 有 > 
< htm]l xmlns = "http://www.w3.org/1999/xhtml"> 
<head id= "Headl" runat = "server"><title> 验 证 控件 的 运用 </title></head> 
<body> 
< form id = "forml" runat = "server"> 
<asp:Literal ID = "Literall"” runat = "server" Text = "学 院 编号 "></asp:Literal > 
<asp:TextBox ID = "TextBoxl"”runat = "server"></asp:TextBox> 
<asp:RangeValidator ID = "RangeValidator1" runat = "server" ErrorMessage = "编号 在 1 
和 9 之 间 !" Display = " Dynamic" ControlToValidate = " TextBoxl " MaximumValue = "25" 
MinimumValue = "1"></asp:RangeValidator >< br /> 
<asp:Literal ID = "Literal2"”runat = "server" Text = "学 院 名 称 "> </asp:Literal> 
<asp:TextBox ID = "TextBox2" runat = "server"></asp:TextBox> gnbsp; 
< asp: RequiredFieldValidator ID = " RequiredFieldValidatorl ”runat = " server" 
ErrorMessage = "学 院 名 称 不 能 为 空 !" Display = "Dynamic" ControlToValidate = "TextBox2"></asp: 
RequiredFieldValidator >< br /> 
<asp:Label ID = "Labell" runat = "server" ForeColor = "MediumBlue" Text = 
"请 输入 URL 地 址 :"></asp:Label> 
<asp:TextBox ID = "TextBox3" runat = "server"></asp:TextBox> 
<asp:RegularExpressionValidator ID = "RegularExpressionValidator1" runat = "server" 
ControlToValidate = "TextBox3" ErrorMessage= "输入 的 URL 地 址 不 正确 !" 
Display = "Dynamic" ValidationExpression = "http(s)?://([\w— ]+\.)+[\w-]+(/[\w- /?%& 
= ] * )?"> </asp:RegularExpressionValidator ><br /> 
<asp:Label ID= "Label2" runat = "server" ForeColor = "MediumBlue" Text = 
"请 输入 Email 地 址 :"></asp:Label> 
<asp:TextBox ID = "TextBox4" runat = "server"></asp:TextBox> 
<asp: RegularExpressionValidator ID= "RegularExpressionValidator2" runat = "server" 
ControlToValidate = "TextBox4" ErrorMessage = "输入 的 Email 地 址 不 正确 !" Display = "Dynamic" 
ValidationExpression="\w+ ([— +.']\w+)x*@\w+t ([—.]\wt+)*\.\w+([-.]\w+)*"> 
</asp:RegularExpressionValidator ><br /> 
<asp:Label ID = "Label3" runat = "server" ForeColor = "MediumBlue" Text = 
"请 输入 旧 密 码 :"></asp:Label > 
< asp:TextBox ID = "TextBox5" runat = "server" TextMode = "Password"> </asp:TextBox >< br /> 
<asp:Label ID = "Label4" runat = "server" ForeColor = "MediumBlue" 
Text = "请 输入 新 密码 :"></asp:Label > 
<asp: TextBox ID= "TextBox6" runat = "server" TextMode = "Password"> </asp:TextBox >< br /> 
<asp:Label ID= "Label5" runat = "server" ForeColor = "MediumBlue" 
Text = "请 确认 新 密码 :"></asp:Label> 
<asp:TextBox ID = "TextBox7" runat = "server" TextMode = "Password"> </asp:TextBox> 
<asp:CompareValidator ID = "CompareValidator1" runat = "server" 
ErrorMessage = "前 后 密码 输入 不 一 致 !" 
ControlToCompare = "TextBox6" ControlToValidate = "TextBox7" Display = "Dynamic"> 
</asp:CompareValidator > 
<asp:ValidationSummary ID = "ValidationSummary Error" 
runat = "server" ShowMessageBox = "True" DisplayMode = "SingleParagraph" /> 
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<br /> 
<asp:Button ID = "Button1" runat = "server" Text = " 确 定 " /> 
<asp:Button ID = "Button2" runat = "server" Text = " 取 消 " /> 
</form> 
</body> 
</htm]l > 


完成 设计 界面 如 图 6-4 所 示 。 一 一 一 mm 
一 般 情况 下 输入 数据 的 有 效 性 验证 可 通过 客户 “妓生 
端 验证 来 进行 ,这 样 可 避免 服务 器 端 验证 所 需要 的 Wm 和 和 
信息 往返 ,除非 是 对 安全 性 要 求 高 的 场合 才 采用 服 中 着 因 六 一 ea 
务 器 端 验证 。 可 使 用 验证 控件 的 EnableClientScript 隔 S 8 1。 请 且 作息 2 


属性 来 指定 是 否 启用 客户 端 验证 。 
6.2.3 服务 器 控件 使 用 注意 事项 


使 用 VS 2010 进行 Web 开发 的 初学 者 很 容易 产生 对 服务 器 控件 的 依赖 ,几乎 所 有 
Web 页 面 都 采用 服务 器 控件 ,而 HTML 控件 (客户 端 控件 ) 被 束之高阁 ,这 当然 是 一 种 简便 
的 编程 方法 , 却 是 一 种 不 考虑 运行 效率 的 做 法 。 我 们 在 本 节 开 头 已 介绍 了 客户 端 控件 和 服 
务 器 控件 的 区 别 。 服 务 器 控件 意味 着 要 消耗 更 多 的 网 络 带 宽 和 服务 器 资源 ,而 客户 端 控 件 
的 处 理 逻 辑 全 部 在 浏览 器 中 进行 。 因 此 不 能 养 成 使 用 服务 器 控件 的 习惯 性 思维 ,在 使 用 控 
件 的 时 候 有 必要 思考 一 下 采用 客户 端 控件 的 可 能 性 。 

下 面 的 代码 示例 中 服务 器 端 和 客户 端 文本 框 控件 将 显示 相同 的 值 , 它 演示 了 数据 的 传 
递 方式 。 将 ASPX 文件 中 的 服务 器 控件 TextBoxl 删除 (删除 ASPX 文件 中 的 第 8 行 和 CS 
文件 中 的 第 11 行 ) ,运行 后 得 到 的 HTML 页 面 大 小 为 567 字 节 ( 单 击 浏览 器 文件 菜单 中 的 
属性 选项 查看 ); 而 将 服务 器 控件 TextBoxl 保留 ,删除 客户 端 控件 ,运行 后 得 到 的 HTML 
页 面 大 小 为 729 字 节 。 可 以 看 出 实现 同样 的 功能 ,服务 器 文本 框 控 件 在 网 络 上 要 比 客户 端 
控件 多 传输 162 字 节 ,这 还 不 算 后 台 处 理 的 时 间 和 占用 的 系统 资源 。 因 此 应 根据 情况 ,尽量 
使 用 客户 端 控件 。 


6-4 ”验证 控件 设计 界面 


Default2. aspx 页 面 文件 代码 : 

1 <%(@ Page Language = "C#" RutoEventWireup = "true" CodeFile = "Default2.aspx.cs" 
2 Inherits = "Default2" %> 

3 <% string hisName = "Yangking"; $%> 

4 <html >< head runat = "server"><title> 无 标题 页 </title></head> 

号 <body> 

6 <form id= "forml" runat = " server"> 

姓名 : < input id= "Text1" type = "text" value= "<% =myName%>" /> gnbsp;<br /> 
8 姓名 : < asp:TextBox ID = "TextBoxl"”runat = "server"></asp:TextBox> 

9 </form> 

10 <script>alert('<% = myName $%>');</script> <! -- 显示 "WangCL" -一 > 

11 < script>alert(<$% = hisName >');</script > <! -- 显示 "Yangking" 一 一 > 

12 </body> 

13 </html> 

Default2.aspx. cs 文件 代码 : 

1 using System; 

2 using System.Data; 


using System. Web; 


using System. Web. UI; 
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using System. Web. UI. WebControls; 


public partial class Default2 : System. Web.UI.Page 


| 
4 
5 
6 using System.Web.UI.HtmlControls; 
7 
8 


{ protected string myName = "WangCL"; 


9 protected void Page_Load(object sender, EventArgs e) 
10 { myName = "WangCL"; // 可 访问 数据 库 得 到 相关 数据 
二 TextBoxl. Text = myName; 


2 


6.2.4 服务 器 端 数据 访问 控件 


数据 访问 控件 根据 所 实现 的 功能 分 为 两 大 类 : 数据 源 控件 和 数据 绑 定 控件 。 数 据 源 控 
件 可 实现 对 不 同 数据 源 的 数据 访问 ,主要 包括 连接 数据 源 , 使 用 SQL 语句 获取 和 管理 数据 
等 。 数 据 绑 定 控件 主要 用 于 以 多 种 方式 显示 数据 。 通 常情 况 下 ,可 以 将 数据 源 控件 与 数据 
绑 定 控件 结合 起 来 ,数据 源 控件 负责 获取 和 处 理 数据 ,数据 绑 定 控件 负责 将 数据 显示 在 页 面 


上 。 数 据 源 控件 和 数据 绑 定 控件 如 表 6-19 所 示 。 


控件 名 称 


表 6-19 数据 源 控件 和 数据 绑 定 控件 
说 明 


SqlDataSource 


用 于 连接 SQL 数据 库 ,可 以 用 来 从 任何 OLEDB 或 者 符合 ODBC 的 数据 
源 中 检索 数据 ,能 够 访问 目前 主流 的 数据 库 系统 


AccessDataSource 


用 于 连接 Access 数据 库 ,允许 以 声明 方式 将 Access 数据 库 中 的 数据 绑 定 
到 指定 对 象 中 


ObjectDataSource 


用 于 连接 自 定 义 对 象 ,允许 以 声明 方式 将 对 象 绑 定 到 自 定 义 对 象 公开 的 
数据 ,以 用 于 多 层 Web 应 用 结构 


裤 凡 营 中 江 


XmlDataSource 


该 控件 可 装载 XML 文件 作为 数据 源 , 并 将 其 绑 定 到 指定 的 对 象 中 


SiteMapDataSource 


该 控件 装载 一 个 预先 定义 好 的 站 点 布局 文件 作为 数据 源 , Web 服务 器 控 
件 和 其 他 控件 可 通过 该 控件 绑 定 到 分 层 站 点 地 图 数据 ,以 便 制 作 站 点 的 
页 面 导航 功能 


Repeater 


自由 地 控制 数据 的 显示 。 即 可 以 使 用 非 表 格 的 形式 来 显示 数据 ,从 而 能 
够 更 灵活 地 定义 其 显示 的 风格 


GridView 


.NET 中 功能 强大 的 数据 控件 ,不 需要 编写 代码 就 可 实现 数据 的 连接 、 绑 
定 、 编 辑 删除 .增加 等 功能 


DataList 


可 定义 模板 或 样式 来 灵活 地 显示 数据 


DetailsView 


用 于 显示 表 中 数据 源 的 单个 记录 ,其 中 每 个 数据 行 表 示 记 录 中 的 一 个 字 
段 。 该 控件 通常 与 GridView 控件 组 合 使 用 ,构成 主 -从 显示 方案 


装 沁 装 哨 江 


FormView 


用 于 显示 表 中 数据 源 的 单个 记录 。 使 用 FormView 控件 时 , 需 指定 模板 以 
显示 和 编辑 绑 定 值 。 模 板 中 包含 用 于 创建 窗 体 的 格式 、 控 件 和 绑 定 表达 
式 。FormView 控件 通常 与 GridView 控件 一 起 用 于 主 控 / 详 细 信息 方案 


ReportViewer 


用 于 显示 报表 、 工 具 栏 和 文档 结构 图 的 视图 区 域 。 工 具 栏 是 可 配置 的 , 它 
提供 了 运行 时 功能 以 支持 多 页 报表 中 的 导航 、 缩 放 、 搜 索 、 打 印 和 导出 功 
能 。 提 供 编程 接口 ,以 便 可 以 自 定义 控件 ,配置 控件 ,以 及 通过 代码 与 控 
件 进行 交互 ,包括 更 改 在 运行 时 ReportViewer 使 用 的 数据 源 
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下 面 分 别 对 上 述 控件 进行 一 一 介绍 。 

1. 数据 源 控件 

数据 源 控件 分 为 两 种 : 普通 数据 源 控件 和 层次 化 数据 源 控件 ( 树 型 结构 )。 普 通 数 据 源 
控件 包括 SqlDataSource、ObjectDataSource、AccessDataSource, 主 要 检索 带 有 行 和 列 的 基 
于 数据 表 的 数据 源 ; 层次 化 数据 源 控件 包括 XmlDataSource 和 SiteMapDataSource, 主 要 检 
索 包 含 层次 化 数据 的 数据 源 。 

1) SqlDataSource 控件 

SqlDataSource 控件 的 应 用 非常 广泛 ,可 以 用 来 从 任何 OLEDB 或 者 符合 ODBC 的 数据 源 
中 检索 数据 ,能够 访问 目前 主流 的 数据 库 系统 。 该 控件 常用 的 属性 及 说 明 如 表 6-20 所 示 。 


表 6-20 ”SqlDataSource 控件 常用 属性 及 说 明 


序号 属 性 说 明 
1 ConnectionString 用 于 设置 连接 数据 源 字符 串 
3 ProviderName 用 于 设置 不 同 的 数据 提供 程序 ,未 设置 该 属性 , 则 默认 为 System. 
Data. SqlClient 


SelectCommand 执行 数据 记录 选择 操作 的 SQL 语句 或 者 存储 过 程 名 称 

UpdateCommand 执行 数据 记录 更 新 操作 的 SQL 语句 或 者 存储 过 程 名 称 

DeleteCommand 执行 数据 记录 删除 操作 的 SQL 语句 或 者 存储 过 程 名 称 

InsertCommand 执行 数据 记录 添加 操作 的 SQL 语句 或 者 存储 过 程 名 称 

DataSourceMode 用 于 获取 或 设置 SqlDataSource 控件 获取 数据 时 所 使 用 的 数据 返 
回 模式 ,包含 2 个 可 选 枚 举 值 : DataReader 和 DataSet 


站 口上 四 中 


打开 VS 2010 在 “设计 ” 窗 体 中 放 和 SqlDataSource 控件 后 ,出 现 智能 标记 “配置 数据 
源 ”, 单 击 后 出 现 * 配 置 数据 源 ” 对 话 框 向 导 , 即 可 选择 一 个 现 有 的 数据 连接 ,也 可 创建 新 的 数 
据 连 接 。 单 击 “ 新 建 连接 ”后 出 现 “ 添 加 连接 ”对 话 框 ,如 图 6-5 所 示 。 

默认 显示 数据 源 连接 方式 为 Microsoft ODBC 数据 源 (ODBC) ,可 以 单 击 “ 更 改 ” 选 择 其 
他 连接 数据 源 的 方式 。 单 击 * 更 改 " 后 出 现 如 图 6-6 所 示 对 话 框 。 


| 
到 取消 | 


图 6-5 “添加 连接 ”对 话 框 (1) 图 6-6 “更 改 数据 源 ”对话 框 
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从 图 6-6 可 知 ,. NET 支持 多 种 数据 源 连接 
方式 。 若 数据 库 为 SQL Server 2000/2005 ,采用 
Microsoft SQL Server 专用 接口 方式 可 以 获得 最 
快 的 连接 性 能 。 单 击 “ 确 定 ” 按 钮 后 “添加 连接 ”对 
话 框 如 图 6-7 所 示 。 

输入 数据 库 服 务 器 名 称 ,输入 登录 数据 库 服 
务 器 的 用 户 名 和 密码 ,再 选择 数据 库 ( 这 里 选择 
SQL Server 中 自 带 的 NorthWind 数据 库 ) , 单 击 
“测试 连接 ”按钮 看 看 是 否 连 接 成 功 。 可 单 击 “高 
级 "来 修改 连接 数据 库 的 各 项 参数 设置 ,以 提高 数 
据 访 问 性 能 。 单 击 “ 确 定 ” 按 钮 后 又 回 到 “配置 数 
据 源 ”对 话 框 (此 时 已 在 VS 2010 的 “服务 器 资源 
管理 器 ”中 生成 了 一 个 wclnote. Northwind. dbo 
连接 ), 单 击 “ 下 一 步 ” 按 钮 ,选择 将 此 连接 另存 为 
Northwind-ConnectionString, 之 后 连接 字符 串 将 
被 保存 到 应 用 程序 配置 文件 web. config 中 
(6. 2.5 节 中 介绍 )。 其 内 容 为 : 6-7 “添加 连接 ”对 话 框 (2) 


< connectionStrings > 
< add name = "NorthwindConnectionString" connectionString = "Data Source = WCLNOTE; Initial 
Catalog = Northwind; Persist Security Info = True;User ID = sa;Password = docman" 
providerName = "System. Data. SqlClient" /> 
</connectionStrings> 


其 中 ,connectionString 字 串 中 Data Source 参数 设置 数据 库 服务 器 名 称 ; Initial Catalog 参 
数 设置 数据 库 名 称 ; User ID 参数 设置 访问 数据 库 的 用 户 名 ; Password 参数 设置 该 用 户 名 
对 应 的 数据 库 访问 密码 。 

再 单 击 “下 一 步 *, 出 现 * 配 置 Select 语句 "对话 框 ,其 中 有 两 个 选项 :“ 指 定 自 定义 SQL 
语句 或 存储 过 程 ” 和 * 指 定 来 自 表 或 视图 的 列 ”。 当 选中 * 指 定 来 自 表 或 视图 的 列 ? 后 ,选择 某 
个 表 或 视图 ,选择 要 显示 的 列 名 ,通过 单 击 Where 和 Order by 生成 where 子 句 和 order by 
子 句 ,再 单 击 “ 下 一 步 ”, 单 击 “ 测 试 查询 ”可 预先 查看 查询 出 来 的 数据 , 单 击 “ 完 成 ”, 即 完成 了 
利用 SqlDataSource 控件 连接 数据 源 的 工作 。 当 选中 “配置 Select 语句 ”对 话 框 中 的 “指定 
自 定义 SQL 语句 或 存储 过 程 " 后 , 单 击 “ 下 一 步 ”", 可 直接 输入 SQL 语句 或 用 “查询 生成 器 ” 
辅助 生成 一 个 SQL 请 句 , 也 可 选择 一 个 存储 过 程 作为 数据 源 ,最 后 单 击 “ 完 成 ”按钮 完成 数 
据 源 的 配置 工作 。 

经 过 上 述 步骤 后 ,在 VS 2010 中 按 下 Ctrl 十 Alt 十 S 组 合 键 或 单 击 主 菜单 中 的 “视图 ”| 
“服务 器 资源 管理 器 ”就 会 出 现 “ 服 务 器 资源 管理 器 "窗口, 单 击 前 面 生 成 的 wclnote. 
Northwind. dbo 数据 连接 ,就 可 在 VS 2010 环境 下 管理 Northwind 数据 库 的 表 、 视 图 ,存储 
过 程 等 ,可 以 在 快捷 菜单 中 发 现 很 多 有 用 的 功能 ,例如 新 建 或 删除 一 个 表 / 视 图 /存储 过 程 / 
函数 、 显 示 选 中 表 / 视 图 的 数据 、 创 建 一 个 表 的 触发 器 ,等 等 。 当 然 也 可 在 “服务 器 资源 管理 
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器 ?中 直接 创建 一 个 新 的 数据 连接 ,方法 是 鼠标 右 击 “数据 连接 ”后 选择 “添加 连接 ”, 再 在 出 
现 的 对 话 框 中 进行 配置 。 

SqlDataSource 控件 的 数据 源 配置 工作 完成 后 ,就 可 被 数据 绑 定 控件 使 用 ,用 来 将 数据 
显示 出 来 。 数 据 源 配置 后 在 ASPX 文件 中 生成 如 下 代码 : 


<asp:SqlDataSource ID = "SqlDataSourcel" runat = "server" 

ConnectionString = "<% $ ConnectionStrings:NorthwindConnectionString %>" 

SelectCommand = " SELECT [CustomerID], [CompanyName], [ ContactName ]， [ContactTitle], 
[address]，[City]，[Region]，[PostalCode]，[Country]，[Phone]，[Fax] FROM [Customers]"> 
</asp:SqlDataSource> 


其 中 <% $ ConnectionStrings: NorthwindConnectionString %> 就 是 从 应 用 程序 配置 文件 
web. config 中 取 回 的 数据 库 连 接 参 数 。 

2) AccessDataSource 控件 

.NET 提供 了 一 种 访问 Access 数据 库 的 专用 数据 源 控件 AccessDataSource。 该 控件 
能 够 快速 连接 Access 数据 库 , 并 且 通 过 SQL 语句 等 对 数据 库 记 录 实 现 操作 。 通 过 
SqlDataSource 控件 也 可 连接 Access 数据 库 ,Access 数据 库 文件 可 放 在 服务 器 任意 位 置 ,但 
AccessDataSource 控件 在 使 用 时 要 求 事先 将 Access 数据 库 文件 放 到 Web 服务 器 主 目录 下 
的 某 个 位 置 ,一 般 放 在 主 目录 的 App_Data 子 目 录 下 。 该 控件 常用 的 属性 及 说 明 如 表 6-21 
所 示 。 此 控件 的 数据 源 配 置 过 程 同 SqlDataSource 控件 。 


表 6-21 AccessDataSource 控件 常用 属性 及 说 明 


序号 属 性 说 明 
1 DataFile 该 属性 用 于 指定 Access 文件 的 虚拟 路 径 或 者 UNC 路 径 
2 ProviderName 用 于 设置 不 同 的 数据 提供 程序 ,未 设置 该 属性 , 则 默认 为 System. 
Data. OleDb 


3 SelectCommand 执行 数据 记录 选择 操作 的 SQL 语句 或 者 存储 过 程 名 称 

4 UpdateCommand 执行 数据 记录 更 新 操作 的 SQL 语句 或 者 存储 过 程 名 称 

5 DeleteCommand 执行 数据 记录 删除 操作 的 SQL 语句 或 者 存储 过 程 名 称 

6 InsertCommand 执行 数据 记录 添加 操作 的 SQL 语句 或 者 存储 过 程 名 称 

7 DataSourceMode 用 于 获取 或 设置 SqlDataSource 控件 获取 数据 时 所 使 用 的 数据 返 
回 模式 ,包含 2 个 可 选 枚 举 值 : DataReader 和 DataSet 


3) ObjectDataSource 控件 

多 数 ASP. NET 数据 源 控件 ,如 SqlDataSource 等 ,都 在 两 层 应 用 程序 层次 结构 中 使 
用 。 在 该 层次 结构 中 ,表示 层 (ASP. NET 网 页 ) 可 以 与 数据 层 ( 数 据 库 和 XML 文件 等 ) 直 
接 进行 通信 。 但 是 ,常用 的 应 用 程序 设计 原则 是 ,将 表示 层 与 业务 逻辑 相 分 离 ,而 将 业务 逻 
辑 封装 在 业务 对 象 中 。 这 些 业务 对 象 在 表示 层 和 数据 层 之 间 又 形成 一 层 , 从 而 生成 一 种 三 
层 应 用 程序 结构 。ObjectDataSource 控件 通过 提供 一 种 将 相关 页 上 的 数据 控件 绑 定 到 中 间 
层 业 务 对 象 的 方法 ,为 三 层 结构 提供 支持 。 在 不 使 用 扩展 代码 的 情况 下 ,ObjectDataSource 
使 用 中 间 层 业务 对 象 以 声明 方式 对 数据 执行 选择 .插入 .更 新 \ 删 除 . 分 页 排序、 缓存 和 筛选 
操作 。 
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ObjectDataSource 控件 使 用 反射 调用 业务 对 象 的 方法 ,从 而 对 数据 执行 选择 、 更 新 、 插 
入 和 删除 操作 。 设 置 ObjectDataSource 控件 的 TypeName 属性 来 指定 要 用 作 源 对 象 的 类 
名 称 。 

4) XmlDataSource 控件 

以 上 介绍 的 数据 源 控 件 都 是 针对 支持 SQL 语言 的 关系 型 数据 库 , 其 数据 库 中 保存 和 组 
织 数据 的 方式 是 采用 数据 表 和 列 。 通 常 以 这 种 方式 组 织 的 数据 被 称 为 “表格 化 数据 ,其 特 
点 是 扁平 存储 和 组 织 。 然 而 ,存储 和 组 织 数 据 不 止 一 种 方式 ,还 有 一 种 常见 的 方式 被 称 为 
“层次 化 数据 ”。 该 控件 就 是 专门 针对 XML 数据 而 发 布 的 数据 源 控件 。 该 控件 常用 的 属性 
及 说 明 如 表 6-22 所 示 。 


表 6-22 XmlDataSource 控件 常用 属性 及 说 明 


序号 属 性 说 明 
1 DataFile 该 属性 用 于 获取 或 设置 控件 所 绑 定 的 XML 文件 
2 TransformFile XML 转换 文件 的 路 径 , 即 XSL 文件 
3 XPath 该 属性 用 于 获取 或 设置 应 用 于 XML 数据 中 的 Xpath 查询 值 ,默认 值 


为 空 。Xpath 是 一 种 查询 语言 ,用 于 检索 XML 文档 中 包含 的 信息 


XmlDataSource 控件 在 配置 后 生成 的 ASPX 文件 中 生成 如 下 代码 : 


< asp: XmlDataSource ID = " XmlDataSourcel" runat = " server" DataFile = " 一 /XMLFile. xml" 
TransformFile = "一 /XSLTFile.xsl"> 
</asp:XmlDataSource> 


数据 绑 定 控件 可 利用 XmlDataSource 控件 连接 层次 化 数据 源 进行 相关 处 理 。 

5) SiteMapDataSource 控件 

SiteMapDataSource 控件 用 来 连接 包含 来 自 站 点 地 图 的 导航 数据 。 此 数据 包括 有 关 网 
站 中 的 页 的 信息 ,如 URL ,标题 ,说 明和 位 于 导航 层次 结构 中 的 位 置 。 该 控件 的 使 用 较为 复 
杂 , 有 兴趣 的 读者 可 参阅 其 他 专门 书籍 。 

2. 数据 绑 定 控件 

数据 绑 定 控件 负责 将 从 数据 库 中 获取 的 数据 显示 出 来 。 

1) GridView 控件 

GridView 控件 采用 表格 形式 显示 从 数据 库 中 获取 的 数据 集合 。 通 过 使 用 GridView 控 
件 ,用 户 可 以 显示 、 编 辑 ` 删 除 .排序 和 翻阅 多 种 不 同 的 数据 源 中 的 表格 数据 。 该 控件 常用 的 
属性 及 说 明 如 表 6-23 所 示 。 


表 6-23 GridView 控件 属性 及 说 明 


序号 属 性 说 明 
1 AllowPaging 获取 或 设置 是 否 启用 分 页 功能 
2 AllowSorting 获取 或 设置 是 否 启 用 排序 功能 


3 Columns 获取 表示 GridView 控件 中 列 字段 的 DataControlField 对 象 集合 
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续 表 
序号 属 性 说 明 
4 DataMember 当 数 据 源 包含 多 个 不 同 的 数据 项 列表 时 ,获取 或 设置 数据 绑 定 控 
件 绑 定 到 的 数据 列表 名 称 
5 DataSource 获取 或 设置 数据 绑 定 对 象 的 数据 源 
6 DataSourceID 获取 或 设置 控件 的 ID, 数 据 绑 定 控件 从 该 控件 中 检索 其 数据 项 
列表 
7 EditIndex 获取 或 设置 要 编辑 的 项 的 索引 
8 GridLines 获取 或 设置 GridView 控件 的 网 格 线 样式 
9 了 PageIndex 获取 或 设置 当前 显示 页 的 索引 
10 Rows 获取 表示 GridView 控件 中 数据 行 的 GridViewRow 对 象 的 集合 
1 SelectedIndex 获取 或 设置 GridView 控件 中 的 选中 行 的 索引 
12 SelectedRow 获取 对 GridViewRow 对 象 的 引用 
13 SelectedValue 获取 GridView 控件 中 选中 行 的 数据 值 


【 例 6.11】 该 例 说 明 对 SqlDataSource 数据 源 控件 和 GridView 数据 绑 定 控 件 的 操作 。 
这 是 一 个 使 用 GridView 控件 显示 和 编辑 数据 的 示例 。 与 GridView 控件 联系 在 一 起 的 数 
据 源 控件 是 SqlDataSource。 本 例 所 访问 的 数据 来 自 SQL Server 2000 示例 数据 库 pubs 的 
数据 表 authors。 示 例 效果 如 图 6-8 所 示 。 单 击 “ 编 辑 ” 即 可 修改 被 选中 的 那 行 记录 。 

该 示例 主要 包括 两 个 过 程 : 一 是 对 SqlDataSource 控件 进行 配置 ; 二 是 对 GridView 控 
件 进行 配置 。 对 SqlDataSource 控件 进行 配置 的 过 程 已 在 前 面 作 了 详细 介绍 ,注意 应 选择 
pubs 数据 库 ,而 不 是 Northwind。 下 面 介 绍 对 GridView 控件 进行 配置 。 

首先 将 GridView 控件 放 到 页 面 的 指定 位 置 ,如 图 6-9 所 示 。 


使 用 Gridview 控 件 旺 示 和 编辑 数 关 于 冉 [= 尼 3 


使 用 GridView 控 件 显示 和 编辑 数据 
auid au name state 使 用 GndView 控 件 训 示 和 编辑 数据 
编辑 172-32-1176 White CA ES 
编辑 213-46-8915 Green © 2 
编辑 238-95-7766 Carson Pe Cam co EE 
编辑 267-41-2394 OLeary | abce abc | 


| abc abc abc 


编辑 274-80-9391 Straight 


纺 | abc abc abc es 
E 341-22-1782 Smithl i 本 
编辑 | abc abc abc 护 避 模板 
| _ abc abc abc 
图 6-8 ”GridView 示例 效果 图 图 6-9 配置 GridView 控件 (1) 


在 智能 标记 中 的 “选择 数据 源 ” 中 选择 SqlDataSourcel 控件 后 ,配置 选项 如 图 6-10 所 
示 。 选 中 启用 编辑 和 启用 分 页 。 然 后 右 击 GridView 控件 ,在 出 现 的 快捷 菜单 中 选择 “自动 
套用 格式 ”, 在 出 现 的 “自动 套用 格式 "对话 框 中 选择 “彩色 型 ”。 

至 此 ,完成 了 GridView 控件 的 配置 。 生 成 的 ex_6_11. aspx 源 代码 如 下 所 示 : 
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Gridyiew 任务 
EE CE 
选择 数据 源 ，[5qData5ourcel 加 | 
配置 数据 源 … 
刷新 架构 

六 辑 列 ,.， 
添加 新 列 .… 

左 移 列 

右 移 列 

移 除 列 

加 启用 分 页 

口 局 用 排序 

回 启用 编辑 

口 局 用 扣除 

口 启用 选 定 内 容 
编辑 模板 


6-10 配置 GridView 控件 (2) 


<%@ Page Language = "C#" RutoEventWireup = "true" CodeFile = "ex 6_11.aspx.cs" Inherits= 
"ex 6_11" %> 
<!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
< html xmlns = "http://www. w3. org/1999/xhtml"> 
<head id= "Headl" runat = "server"><title> 使 用 GridView 控件 显示 和 编辑 数据 </title></head> 
<body> 
< form id = "forml”runat = " server"> 
<fieldset style = "width: 250px"> 
< legend > 使 用 GridView 控件 显示 和 编辑 数据 </legend> 
<asp:SqlDataSource ID = "SqlDataSourcel" runat = "server" ConnectionString= "<% 
$ ConnectionStrings:pubsConnectionString $%>" 
SelectCommand = "SELECT [au id], [au_ lname], [state] FROM [authors]" 
DeleteCommand = "DELETE FROM [authors] WHERE [au_id] = @au_id" 
InsertCommand = "INSERT INTO [authors] ([au id], [au lname], [state]) VALUES (@au_ id, @au_ 
lnanme, @state)" 
UpdateCommand = "UPDATE [authors] SET [au lname] = @au lname, [state] = 
@state WHERE [au_id] = @au id"> 
<DeleteParameters> 
<asp:Parameter Name = "au_id" Type = "String" /> 
</DeleteParameters> 
< UpdateParameters> 
<asp:Parameter Name = "au_lname" Type = "String" /> 
<asp:Parameter Name = "state" Type = "String" /> 
<asp:Parameter Name = "au_id" Type = "String" /> 
</UpdateParameters > 
< InsertParameters > 
<asp:Parameter Name = "au_id" Type = "String" /> 
<asp:Parameter Name = "au_lname" Type = "String" /> 
<asp:Parameter Name = "state" Type = "String" /> 
</InsertParameters> 
</asp:SqlDataSource> <br /> 


302 | 
开发 技术 (第 2 版 ) 


<asp:GridView ID= "GridViewl" runat = "server" 
AllowPaging = "True" AutoGenerateColumns = "False" 
CellPadding = "4" DataKeyNames = "au_id" 
DataSourceID = "SqlDataSourcel" Font - Size= "Medium" 
ForeColor = " #333333" GridLines = "None" PageSize = "6"> 
< FooterStyle BackColor = " #990000" Font — Bold= "True" ForeColor = "White" /> 
<Columns> 
<asp:CommandField ShowEditButton = "True" /> 
<asp:BoundField DataField= "au id" HeaderText = "au id" 
ReadOnly = "True" SortExpression = "au_id" /> 
<asp:BoundField DataField= "au_ lname" 
HeaderText = "au_lname" SortExpression = "au_lname" /> 
<asp:BoundField DataField= "state" 
HeaderText = "state" SortExpression= "state" /> 
</Columns> 
< RowStyle BackColor = " #FFFBD6" ForeColor = "#333333" /> 
< SelectedRowStyle BackColor = " # FFCC66" Font - Bold= "True" 
ForeColor = "Navy" /> 
< PagerStyle BackColor = " #FFCC66" 
ForeColor = " # 333333" HorizontalAlign = "Center" /> 
< HeaderStyle BackColor = "#990000" Font 一 Bold= "True" ForeColor = 
"White" /> 
<AlternatingRowStyle BackColor = "White" /> 
</asp:GridView> 
<br /> 
</fieldset > 
</form> 
</body> 
</htm]l > 


2) Repeater 控件 
数据 绑 定 控件 Repeater 的 主要 功能 是 以 更 自由 的 方式 来 控制 数据 的 显示 。 它 会 按照 
所 要 求 的 样式 严格 地 输出 数据 记录 。Repeater 控件 本 身 不 具备 内 置 的 呈现 功能 ,用 户 必 须 
通过 创建 模板 为 Repeater 控件 提供 布局 。 模 板 中 可 以 包含 标记 和 控件 的 任意 组 合 。 如 果 
未 定义 模板 ,或 者 如 果 模 板 不 包含 元 素 , 则 当 应 用 程序 运行 时 ,该 控件 不 显示 在 页 上 。 
Repeater 控件 支持 的 模板 如 表 6-24 所 示 。 
表 6-24 ”Repeater 控件 支持 的 模板 


模板 属 性 说 明 
HeaderTemplate 页 头 模板 容纳 数据 列表 开始 处 需要 呈现 的 文本 和 控件 
ItemTemplate 数据 项 模板 容纳 需要 重复 显示 的 数据 记录 ,数据 记录 以 HTML 元 素 和 控件 
来 呈现 


AlternatingItemTemplate ”交替 项 模板 功能 同 数据 项 模板 。 通 常 ,可 以 使 用 此 模板 为 交替 项 创建 不 同 
的 外 观 , 例 如 指定 一 种 与 在 ItemTemplate 中 指定 的 颜色 不 同 的 背景 色 

SeparatorTemplate 分 隔 模 板 容纳 每 条 记录 之 间 呈 现 的 元 素 。 如 用 一 条 直线 (hr 元素) 实现 数 
据 记 录 间 的 分 隔 

FooterTemplate 页 脚 模板 容纳 在 列表 的 结束 处 分 别 旦 现 的 文本 和 控件 
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由 于 Repeater 控件 没有 默认 的 外 观 , 因 此 可 以 使 用 该 控件 的 模板 创建 许多 种 列表 , 包 
括 表 布 局 .逗号 分 隔 的 列表 .XML 格式 的 列表 等 。 


」 文件 四 六 各 日 ” 亚 看 (0 收 荐 蚊 。 工具 帮助 只 


Name Description 
Beverages 。 Soft drinks, coffees, teas, beers, and ales 


Condiments 。 Sweet and savory sauces, relishes, spreads, and seasonings 


工具 D PW) 


Description 
Beverages Sof drinks, coffees, teas, beers, and ales 


Condiments Sweetandsavory saces, relshes, spreads, and 
seasorings 


Cenfeetions 。 Desserts, candies, and sweet breads 
Dary Products Cheeses 

Grains/Cereals Breads, crackers, pasta, and cereal 
MeatPoultry Prepared meats 

Produce Dried fiut andbean curd 

Seafood ~ Seaweedandish 


Confections Desserts, candies, and swect breads 


Deary Products Cheeses 


GrainsfCereals Breads, crackers, pasta, and cereal 


MeatPoulry Prepared meats 


Produce Dried fruit and bean curd 


le bs ul 


Seafood Seaweed and fish 到 
山 刘 和 厂矿 厂 功 各 We ET i £2 7 
(a) (b) 


6-11 ”Repeater 控件 示例 效果 图 


【 例 6.12】 该 例 说 明了 如 何 利用 模板 来 实现 数据 的 输出 。 图 6-11 为 最 终 显示 效果 图 。 
左 图 为 没有 交替 项 模板 的 情况 ; 右 图 为 具有 交替 项 模板 的 情况 。 该 例 在 “设计 中 放置 了 一 
个 Repeater 控件 和 SqlDataSource 控件 ,SqlDataSource 控件 用 来 连接 数据 源 , 配 置 数据 源 
方法 同 前 。 在 Repeater 控件 中 的 DataSourceID 属性 中 选择 此 SqlDataSource 控件 。 进 入 “ 源 ” 
中 ,手工 加 入 上 述 5 个 模板 ,分 别 在 每 个 模板 中 编写 代码 。 具 体 ex_6_12. aspx 文件 代码 如 下 : 


<%@ Page Language = "C#" AutogventWireup = "true" CodeFile = "ex 6_12.aspx.cs" Inherits= 
"ex 6 12" %> 
<!DOCTYPE html PUBLIC " ~ //W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
< htm]l xmlns = "http://www. w3. org/1999/xhtm1"> 
<head id = "Headl" runat = "server"><title> 无 标题 页 </title></head> 
<body> 
< form id = "forml" runat = "server"> 
<div> 
<asp:SqlDataSource ID = "SqlDataSourcel" runat = "server" 
ConnectionString = "<% $ ConnectionStrings: 
NorthwindConnectionString %>" 
SelectCommand = "SELECT [CategoryID], [CategoryName], 
[Description], [Picture] FROM [Categories]"> 
</asp:SqlDataSource> 
<asp:Repeater ID = "Repeaterl1l" runat = "server" DataSourceID = 
"SqlDataSourcel"> 
< HeaderTemplate> 
<table> 
Er 
<th> Name </th> <th> Description</th> 
</tr> 
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</HeaderTemplate> 
< ItemTemplate> 
到 入 
<td bgcolor = "#CCFFCC"> 
<asp:Label runat = "server" ID= "Labell" 
Text = '<% # Eval("CategoryName") %>'/> 
</td> 
< td bgcolor = "#9CCFFCC"> 
<asp:Label runat = "server" ID = "Label2" 
Text = '<%# Eval("Description") %>'/> 
</td> 
</tr> 
</ItemTemplate> 
<AlternatingItemTemplate> 
六 EEF 和 
<td> 
<asp:Label runat = "server" ID= "Label3" 
Text = '<%# Eval("CategoryName") $>'/> 
</td> 
<td> 
<asp:Label runat = "server" ID = "Label4" 
Text = '<%# Eval("Description") %>'/> 
</td> 
</tr> 
</AlternatingItemTemplate> 
< SeparatorTemplate> 
<tr><td height = "1" colspan= "2">< hr /></td></tr> 
</SeparatorTemplate> 


< FooterTemplate ></table ></FooterTemplate> 
</asp:Repeater > 
</div> 
</form> 
</body> 
</html > 


上 述 代码 中 ,对 放置 5 个 模板 的 先后 次 序 并 无 要 求 ,建议 按 表 6-24 的 顺序 依次 放置 , 便 
于 阅读 代码 。ItemTemplate 是 必需 的 ,AlternatingItemTemplate 和 SeparatorTemplate 可 
有 可 无 。 需 要 重复 显示 的 HTML 元 素 ( 包 括 数 据 ) 放 在 ItemTemplate、 
AlternatingItemTemplate 和 SeparatorTemplate 中 , HeaderTemplate 和 FooterTemplate 
中 放置 不 重复 显示 的 HTML 元 素 .“ 到 名 井 Eval("CategoryName") % 之 ”表示 从 
SqlDataSourcel 数据 源 中 取出 CategoryName 列 的 值 。 

3) DataList 控件 

DataList 服务 器 控件 使 用 模板 和 样式 来 显示 数据 。 它 需要 连接 到 某 个 数据 源 控件 , 实 
现 不 同 布局 的 数据 显示 。 可 以 将 DataList 控件 绑 定 到 ADO. NET 数据 集 (DataSet 类 ) 数 
据 读 取 器 (SqlDataReader 类 或 OleDbDataReader 类 ) 等 。 可 使 用 DataList 控件 来 显示 模板 
定义 的 数据 绑 定 列表 。DataList 控件 所 支持 的 模板 类 型 类 似 于 Reapter 控件 ,但 增加 了 编 
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辑 和 选择 模板 。 编 辑 模板 可 用 来 删除 和 修改 记录 ; 选择 模板 可 用 来 处 理 选 中 某 个 记录 后 的 
显示 方式 。 模 板 类 型 如 表 6-25 所 示 。 


表 6-25 ”DataList 模板 类 型 


模板 属 性 说 明 
HeaderTemplate 页 头 模板 容纳 数据 列表 开始 处 需要 呈现 的 文本 和 控件 
ItemTemplate 数据 项 模板 容纳 需要 重复 显示 的 数据 记录 ,数据 记录 以 HTML 元 素 和 控 
件 来 呈现 


AlternatingItemTemplate 交 蔡 项 模板 功能 同 数据 项 模板 。 通 常 ,可 以 使 用 此 模板 为 交替 项 创建 不 
同 的 外 观 ,例如 指定 一 种 与 在 ItemTemplate 中 指定 的 颜色 不 同 的 背景 色 

SelectedItemTemplate 选择 模板 包含 一 些 元 素 , 当 用 户 选择 DataList 控件 中 的 某 一 条 记录 时 将 
呈现 这 些 元 素 。 通 常 ,可 用 此 模板 来 通过 不 同 的 背景 色 或 字体 颜色 直观 
地 区 分 选 定 的 行 。 还 可 以 通过 显示 数据 源 中 的 其 他 字段 来 展开 该 项 


EditItemTemplate 编辑 模板 指定 当 某 记录 处 于 编辑 模式 中 时 的 布局 。 此 模板 通常 包含 一 些 
编辑 控件 ,如 TextBox 控件 

SeparatorTemplate 分 隔 模 板 容纳 每 条 记录 之 间 呈 现 的 元 素 。 如 用 一 条 直线 (hr 元素) 实现 
数据 记录 间 的 分 隔 

FooterTemplate 页 脚 模板 容纳 在 列表 的 结束 处 分 别 呈 现 的 文本 和 控件 


DataList 控件 常用 属性 及 说 明 与 GridView 控件 相似 。 其 常用 事件 及 说 明 如 表 6-26 所 示 。 
表 6-26 ”DataList 控件 常用 事件 及 说 明 


序号 事 件 说 明 
1 CancelCommand 对 DataList 控件 中 的 某 个 项 单 击 Cancel 按钮 时 发 生 
2 DeleteCommand 对 DataList 控件 中 的 某 个 项 单 击 Delete 按钮 时 发 生 
3 EditCommand 对 DataList 控件 中 的 某 个 项 单 击 Edit 按钮 时 发 生 
4 ItemCommand 当 单 击 DataList 控件 中 的 任 一 按钮 时 发 生 
5 ItemDataBound 当 某 个 记录 的 数据 被 绑 定 到 DataList 控件 时 发 生 
6 ItemCreated 当 在 DataList 控件 中 创建 记录 时 在 服务 器 上 发 生 
7 SelectedIndexChanged 在 两 次 服务 器 发 送 之 间 , 当 DataList 控件 中 选择 了 不 同 的 项 时 发 生 
8 UpdateCommand 对 DataList 控件 中 的 某 个 项 单 击 Update 按钮 时 发 生 


在 使 用 DataList 控件 时 ,可 以 通过 智能 标记 中 的 “自动 套用 格式 *“ 属 性 生成 器 "“ 编 
辑 模板 ”来 进行 控件 的 属性 设置 。 对 于 分 页 .记录 编辑 .排序 等 必须 通过 手工 编写 代码 完成 。 
下 面 通过 例子 来 说 明 该 控件 的 使 用 。 

【 例 6. 13】 该 例 说 明了 在 DataList 中 如 何 利用 模板 来 实现 数据 的 输出 。 在 例 6. 12 所 
示 代 码 中 ,将 Repeater 的 控件 标记 换 成 DataList 控件 标记 : 


<asp:Repeater ID = "Repeater1" runat = "server" 
DataSourceID = "SqlDataSourcel"> … </asp:Repeater > 


= 
<asp: DataList ID = "DataList1l" runat = "server" DataKeyField = "CategoryID" DataSourcelID = 
"SqlDataSourcel"> .+ </asp:DataList> 


最 终 数据 显示 效果 相同 。 实 际 上 Repeater 控件 是 DataList 控件 的 一 个 特例 。 
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【 例 6. 14】 ee ei eet iiie eg ig crer Sold 
能 。 该 例 中 ,DataList 控件 ItemsList 并 没有 绑 定数 据 源 ,而 是 程序 运行 后 动态 生成 一 
CartView 数据 视图 ,通过 以 下 代码 绑 定 到 ItemsList 控件 。 


ItemsList. DataSource = CartView; 
ItemsList. DataBind(); 


ex_6_14. aspx 中 “一 中井 DataBinder. Eval(Container. Dataltem, "Item") % 记 ”表示 
在 页 中 调用 DataBind 方法 得 到 数据 视图 Item 列 的 值 。 当 在 页 上 调用 DataBind 方法 时 , 数 
据 绑 定 表达 式 创 建 服务 器 控件 属性 和 数据 源 之 间 的 绑 定 。 可 以 将 数据 绑 定 表达 式 包含 在 服 
务 器 控件 开始 标记 中 属性 / 值 对 的 值 一 侧 , 或 页 中 的 任何 位 置 。 所 有 数据 绑 定 表 达 式 都 必须 
包含 在 二 %# 和 % 志 字符 之 间 。ASP. NET 支持 分 层 数 据 绑 定 模型 ,该 模型 创建 服务 器 
控件 属性 和 数据 源 之 间 的 绑 定 。 几 乎 任何 服务 器 控件 属性 都 可 以 绑 定 到 任何 公共 字段 或 属 
性 ,这 些 公共 字段 或 属性 位 于 包含 页 或 服务 器 控件 的 直接 命名 容器 上 。 数 据 绑 定 表 达 式 使 
用 Eval 和 Bind 方法 将 数据 绑 定 到 控件 ,并 将 更 改 提交 回 数据 库 。Eval 方法 是 静态 (只 读 ) 
方法 ,该 方法 采用 数据 字段 的 值 作为 参数 并 将 其 作为 字符 串 返 回 。Bind 方法 支持 读 / 写 功 
能 ,可 以 检索 数据 绑 定 控件 的 值 并 将 任何 更 改 提 交 回 数据 库 。 


轨 Datalist 编 加 模板 的 使 用 - MicrosofE RES 本 阿 [有 了 站 忆 0atauist 编 辑 概 板 的 使 用 - Micn osoft Intemes 站 [| 


DataList Edit Example 


Chick Edit to edit the values of the ttem 


Item Item 1 Ttem Item 2 Item:Item3 
Quantity 2 Quantity: 1 Quantity: 2 
Price: ¥ 2.46 EECe ¥ 3.69 Price: ¥ 4.92 


Edit Edt Edit price. 
Tem Itemd Ttem Item5 Ttem ltem 6 ¥246 ee 民有 
Quantity 1 Quantty 2 Quantity 1 Edit Edt Update Delete Cancel 
rice ¥.6.15 Price: ¥7.38 Price ¥861 
Edit Edit Edt pe er 
Temd Ilem5 re Tem 6 
Ttem' Item 7 tem ltem 8 em ee 9 Re oantiy 
Quanttr 2 (EE Quantiy: :1 
Price: ¥ 9.84 [Price ¥ 11.07 Price: 3 30 后 本 人 加 ¥8.61 
Edit Edit Edit 
Ed | ¥6. 15 ¥7. 38 国 
几 [区 mnt 
(a) (b) 


图 6-12 ”DataList 控件 示例 效果 图 


该 例 中 先 将 一 个 DataList 控件 放 于 “设计 ”中 ,鼠标 右 击 该 控件 ,选择 “编辑 模板 ”1“ 项 
模板 ”, 在 项 模板 中 输入 文本 "Item:"、"Quantity:" 和 "Price:", 并 放 入 一 个 LinkButton 控件 
EditButton ,设置 Text 和 CommandName 属性 设 为 "Edit" ,以 实现 将 来 单 击 该 控件 可 编辑 
数据 。 在 编辑 模板 中 同样 输入 上 述 3 个 文本 ,对 应 文本 放 入 Label 控件 ItemLabel、 
TextBox 控件 QtyTextBox 和 PriceTextBox, 另外 放 入 3 个 LinkButton 控件 
UpdateButton、DeleteButton 和 CancelButton ,用 于 数据 的 更 新 .删除 和 取消 编辑 功能 。 最 
终 运 行 结果 如 图 6-12 所 示 。 页 面 文件 ex_6_14. aspx 的 代码 为 : 
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<$ 四 Page Language = "C#" AutogventWireup = "true" CodeFile = "ex 6 14.aspx.cs" Inherits= 
"ex 6 14" 和 > 
<!DOCTYPE htm] PUBLIC " — //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www. w3. org/TR/xhtml1/DTD/xhtml1 - transitional. dtd"> 
< htm]l xmlns = "http://www.w3.org/1999/xhtml"> 
< head id= "Headl" runat = "server"> <title> DataList 编辑 模板 的 使 用 </title ></head> 
<body> 
< form id= "forml" runat = "Server"> 
<h3 > DataList Edit Example</h3 > 
Click <b> Edit </b> to edit the values of the item. <br><br> 
<asp:DataList ID = "ItemsList”GridLines = "Both" 
RepeatColumns = "3" RepeatDirection= "Horizontal" 
CellPadding = "3" CellSpacing = "0" OnEditCommand = "Edit Command" 
OnUpdateCommand = "Update_ Command" OnDeleteCommand = "Delete Command" 
OnCancelCommand = "Cancel Command" runat = "server"> 
< HeaderStyle BackColor = " # aaaadd"></HeaderStyle> 
<AlternatingItemStyle BackColor = "Gainsboro"> 
</AlternatingItenStyle> 
<EditItemStyle BackColor = "yellow"></EditItemStyle > 
< HeaderTemplate> 
Items 
</HeaderTemplate> 
< ItemTemplate > 
Item: 
<%# DataBinder.Eval(Container.DataItem，"Item") %><br> 
Quantity: 
<%# DataBinder. Eval(Container. DataItem, "Qty") %><br> 
Price: 
<%# DataBinder. Eval(Container.DatalItem, "Price", "{0:c}") %><br> 
<asp:LinkButton ID= "EditButton" Text = "Edit" 
CommandName = "Edit" runat = "server" /> 
</ItemTemplate> 
<EditItemTemplate> 
Itenm : 
<asp:Label ID = "ItemLabel" 
Text = < 有 # DataBinder. Eval(Container.DatalItem, "Item") %>' 
runat = "server" /> 
<br> Quantity: 
<asp:TextBox ID= "QtyTextBox" 
Text = '<% # DataBinder. Eval(Container. DataItem, "Qty") %>' 
runat = "server" /> 
<br>Price: 
<asp:TextBox ID = "PriceTextBox" 
Text = '<% # DataBinder. Eval(Container. DataItem, "Price", 
"Ie ss 
runat = "server" /> <br> 
<asp:LinkButton ID = "UpdateButton" Text = "Update" 
CommandName = "Update" runat = "server" /> 
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< asp:LinkButton ID= "DeleteButton" Text = "Delete" 
CommandName = "Delete" runat = "server" /> 
<asp:LinkButton ID = "CancelButton" Text = "Cancel" 
CommandName = "Cancel" runat = "server" /> 
</EditItemTemplate> 
</asp:DataList > 
</form> 


</body> 
</html > 


ex_6_14. aspx. cs 文件 代码 如 下 : 


using System; 


using System. Data; 
using System. Configuration; 
using System. Web; 


using System. Web. UI; 
using System. Web. UI. WebControls; 
using System. Web. UI. HtmlControls; 


public partial class ex 6 _13 : System.Web.UI.Page 


{ 


// The Cart and CartView objects temporarily store the data source 
// for the DataList control while the page is being processed. 
DataTable Cart = new DataTable(); 

DataView CartView; 


protected void Page_Load(Object sender, EventArgs e) 
{ 
// With a database, use an select query to retrieve the data. 
// Because the data source in this example is an in— memory 
// DataTable, retrieve the data from session state if it exists; 
// otherwise, create the data source. 
GetSource( ); 


// The DataList control maintains state between posts to the server; 
// it only needs to be bound to a data source the first time the 

// page is loaded or when the data source is updated. 

if (!IsPostBack){ BindList(); } 


protected void BindList() 

{ // Set the data source and bind to the DataList control. 
ItemsList. DataSource = CartView; 
ItemsList. DataBind( ); 


protected void GetSource() 


309 
第 6 章 .NET 4.0 Web 应 用 程序 开发 技 回 


// For this example，the data source is a DataTable that 
// is stored in session state. If the data source does not exist, 
// create it; otherwise, load the data. 
if (Session["ShoppingCart"] == null) 
{ 
// Create the sample data. 
DataRow dr; 


// Define the columns of the table. 

Cart. Columns. Add( new DataColumn( "Qty", typeof(Int32))); 
Cart. Columns. Add( new DataColumn("Item", typeof(String))); 
Cart. Columns. Add( new DataColumn("Price", typeof(Double))); 


// Store the table in session state to persist its values 
// between posts to the server. 
Session[ "ShoppingCart"] = Cart; 


// Populate the DataTable with sample data. 
for (ine i ee ed I) 
{ 
dr = Cart.NewRow(); 
if (i % 2!= 0) 
{dr[0] = 2;} 
else 
{dr[0] = 1;} 
dr[1] = "Item" + i.ToString(); 
dr[2] = (1.23 < (i + 1)); 
Cart. Rows. Add( dr); 


} 

else 

{ 
// Retrieve the sample data from session state. 
Cart = (DataTable)Session["ShoppingCart"]; 

} 

// Create a DataView and specify the field to sort by. 

CartView = new DataView(Cart); 

CartView. Sort = "Item"; 

return; 


protected void Edit_Command(Object sender, DataListCommandEventArgs e) 
{ // Set the EditItemIndex property to the index of the item clicked 


// in the DataList control to enable editing for that item. Be sure 
// to rebind the DataList to the data source to refresh the control. 
ItemsList. EditItemIndex = e. Item. ItemIndex; 

BindList() 


protected void Cancel_Command(Object sender, DataListCommandEventArgs e) 
{ // Set the EditItemIndex property to —1 to exit editing mode. Be sure 
// to rebind the DataList to the data source to refresh the control. 
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ItemsList. EditItemIndex = 一 17 
BindList() 


Protected void Delete_Command(Object sender, DataListCommandEventArgs e) 


{ 


// Retrieve the name of the item to remove. 
String item = ((Label)e. Item.FindControl("ItemLabel")).Text; 


// Filter the CartView for the selected item and remove it from 
// the data source. 
CartView. RowFilter = "Item 
if (CartView. Count > 0) 
{CartView. Delete(0);} 
CartView. RowFilter = ""; 


em 


// Set the EditItemIndex property to — 1 to exit editing mode. Be sure 
// to rebind the DataList to the data source to refresh the control. 
ItemsList. EditItemIndex = 一 17 

BindList(); 


protected void Update_Command(Object sender, DataListCommandEventArgs e) 


{ 


// Retrieve the updated values from the selected itenm. 

String item = ((Label)e. Item.FindControl("ItemLabel" ) ) .Text; 
String qty = ((TextBox)e. Item.FindControl("QtyTextBox")).Text; 
String price = ((TextBox)e. Item.FindControl("PriceTextBox")).Text; 


// With a database, use an update command to update the data. 
// Because the data source in this example is an in— memory 
// DataTable, delete the old row and replace it with a new one. 


// Filter the CartView for the selected item and remove it from 
// the data source. 

CartView. RowFilter = "Item='" + item + "'"; 

if (CartView. Count > 0) 

{CartView. Delete(0);} 

CartView. RowFilter = ""; 


oh 闫 兴 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 尖 关 关头 关 关 关 关 关 关 关头 关头 关 
// Insert data validation code here. Make sure to validate the 

// values entered by the user before converting to the appropriate 

// data types and updating the data source. 

// 兴 尖 尖 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 关 


// Mdd a new entry to replace the previous itenm. 

DataRow dr = Cart.NewRow(); 

dr[0] = qty; 

dr[1] = item; 

// If necessary, remove the '¥ 'character from the price before 
// converting the price to a Double. 

if (price[0] == '¥') 
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{ dr[2] = Convert.ToDouble(price.Substring(1));} 
else 

{ dr[2] = Convert.ToDouble(price);} 
Cart. Rows. Add(dr); 


// Set the EditItemIndex property to — 1 to exit editing mode. 
// Be sure to rebind the DataList to the data source to refresh 
// the control. 

ItemsList. EditItemIndex = —1; 

BindList(); 


bh 


4) DetailsView 控件 

DetailsView 控件 的 主要 功能 是 以 表格 形式 显示 和 处 理 来 自 数据 源 的 单条 数据 记录 ,其 
表格 只 包含 两 个 数据 列 。 一 个 数据 列 逐 行 显示 数据 列 名 , 另 一 个 数据 列 显示 与 对 应 列 相 关 
的 详细 数据 值 。 它 可 与 GridView 控件 结合 使 用 ,以 实现 主 /详细 信息 方案 。 

DetailsView 控件 支持 以 下 功能 : @ 绑 定 至 数据 源 控 件 ; 四 内 置 插入 功能 ; @ 内 置 更 新 
和 删除 功能 ; @ 内 置 分 页 功能 ; @ 以 编程 方式 访问 DetailsView 对 象 模型 从 而 动态 设置 属 
性 、 处 理事 件 等 ; @ 可 通过 主题 和 样式 自 定义 外 观 。 

DetailsView 控件 与 GridView 控件 的 功能 , 虽 有 很 多 相似 ,但 也 有 不 同 。 不 同 点 表现 
在 ,DetailsView 控件 内 建 数据 添加 的 支持 ,而 GridView 控件 不 具备 此 项 功能 。 另 外 ,在 数 
据 显示 方面 也 有 区 别 。 通 常 ,GridView 控件 习惯 于 使 用 表格 形式 将 数据 集合 显示 出 来 ,其 
表格 顶部 显示 了 多 个 数据 列 名 ,具体 的 数据 行 都 跟随 在 列 名 以 下 显示 。DetailsView 虽然 也 
显示 数据 ,但 是 每 次 只 显示 一 行 具体 的 数据 。 

DetailsView 控件 中 设置 是 否 自 动 生 成 数据 行 的 属性 是 AutoGenerateRows, 在 自 定义 
设置 数据 绑 定 行 的 过 程 中 ,DetailsView 控件 使 用 二 Fields 之 标签 ,而 GridView 控件 使 用 的 
是 二 Columns 二 。 

表 6-27 列 出 了 可 以 在 DetailsView 控件 中 使 用 的 7 种 不 同 数据 行 字段 类 型 。 

表 6-27 DetailsView 控件 使 用 的 7 种 不 同 数据 行 字段 类 型 


字段 类 型 说 明 
BoundField 以 文本 形式 显示 数据 源 中 某 个 字段 的 值 
ButtonField 在 DetailsView 控件 中 显示 一 个 命令 按钮 。 允 许 显示 一 个 带 有 自 定义 按钮 (如 “添加 ” 
或 “ 移 除 ” 按 钮 ) 控 件 的 行 
CheckBoxField ”在 DetailsView 控件 中 显示 一 个 复 选 框 。 此 行 字段 类 型 通常 用 于 显示 具有 布尔 值 的 
字段 


CommandField ”在 DetailsView 控件 中 显示 用 来 执行 编辑 .插入 或 删除 操作 的 内 置 命令 按钮 

HyperLinkField ”将 数据 源 中 某 个 字段 的 值 显 示 为 超 链接 。 此 数据 行 字段 允许 将 另 一 个 字段 绑 定 到 超 
链接 的 URL 

ImageField 在 DetailsView 控件 中 显示 图 像 

TemplateField 。 根据 指定 的 模板 ,为 DetailsView 控件 中 的 行 显示 用 户 定义 的 内 容 。 此 数据 行 字段 类 
型 用 于 创建 自 定 义 的 数据 行 字段 
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以 上 7 个 数据 行 字段 只 有 当 AutoGenerateRows 属性 设置 为 false 时 才能 使 用 。 在 默 
认 情 况 下 ,AutoGenerateRows 属性 设置 为 true, 即 允许 DetailsView 控件 自动 生成 数据 行 。 
此 时 ,每 个 数据 行 字段 将 以 文本 形式 , 按 其 出 现在 数据 源 中 的 顺序 显示 在 表格 中 。 自 动 生成 
行 提供 了 一 种 显示 记录 中 每 个 字段 的 快速 简单 的 方式 。Fields 对 象 集合 允许 以 编程 方式 管 
理 DetailsView 控件 中 的 数据 行 字段 。 需 要 注意 的 是 ,自动 生成 的 行 字段 不 会 添加 到 Fields 
集合 中 。 同 时 , 显 式 声明 的 行 字段 可 与 自动 生成 的 行 字段 结合 在 一 起 。 两 者 同时 使 用 时 , 先 
呈现 显 式 声明 的 字段 ,再 呈现 自动 生成 的 行 字段 。 

DetailsView 同样 支持 模板 功能 。 表 6-28 列 出 了 它 所 支持 的 模板 。 

表 6-28 ”DetailsView 控件 支持 的 模板 


模板 属性 


说 明 


EmptyDataTemplate 


FooterTemplate 


HeaderTemplate 


PagerTemplate 


获取 或 者 设置 当 DetailsView 控件 绑 定 空 的 数据 源 控件 时 ,由 开发 人 员 定 义 的 
对 于 空 数据 所 呈现 模板 的 内 容 。 默 认 值 为 空 。 可 以 将 自 定义 模板 内 容 放 在 
一 EmptyDataTemplate 之 和 一 /EmptyDataTemplate 二 标签 之 中 。 如 果 DetailsView 
控件 中 同时 设置 了 该 属性 与 EmptyDataText 属性 ,那么 EmptyDataTemplate 
的 优先 级 比 EmptyDataText 高 

获取 或 者 设置 由 开发 人 员 自 定义 的 对 于 表 尾 行 所 呈现 模板 的 内 容 。 默 认 值 为 
空 。 可 以 将 自 定义 模板 内 容 放置 在 二 FooterTemplate 之 和 二 /FooterTemplate 二 
标签 之 中 。 如 果 同 时 设置 了 FooterText 属性 ,该 属性 将 覆盖 FooterText 所 设 
置 的 内 容 

获取 或 者 设置 由 开发 人 员 自 定义 的 对 于 表 头 行 所 呈现 模板 的 内 容 。 默 认 值 为 
空 。 可 以 将 自 定 义 模板 内 容 放置 在 王 HeaderTemplate 之 和 二 /HeaderTemplate 二 
标签 之 中 。 如 果 同 时 设置 HeaderText 属性 ,该 属性 将 覆盖 HeaderText 所 设 
置 的 内 容 

获取 或 者 设置 由 开发 人 员 自 定义 的 对 于 分 页 行 所 呈现 模板 的 内 容 。 默 认 值 为 空 。 
可 以 将 自 定义 模板 内 容 放 在 王 PagerTemplate 之 和 一 /PagerTemplate 之 标签 之 中 


DetailsView 控件 常用 属性 及 说 明 与 GridView 控件 相似 ,在 此 不 再 袭 述 。DetailsView 
控件 的 常用 事件 及 说 明 如 表 6-29 所 示 。 


表 6-29 ”DetailsView 控件 常用 事件 及 说 明 


序号 属 性 说 明 
ta ItemCommand 该 事件 发 生 在 控件 中 某 个 按钮 被 单 击 时 
2 ItemCreated 该 事件 发 生 在 创建 一 个 新 数据 记录 时 
3 ItemDeleted 该 事件 发 生 在 单 击 删除 按钮 时 ,在 删除 操作 之 后 执行 
4 ItemDeleting 该 事件 发 生 在 单 击 删除 按钮 时 ,在 删除 操作 之 前 执行 
5 ItemInserted 该 事件 发 生 在 单 击 添加 按钮 时 ,在 添加 操作 之 后 执行 
6 ItemInserting 该 事件 发 生 在 单 击 添加 按钮 时 ,在 添加 操作 之 前 执行 
7 ItemUpdated 该 事件 发 生 在 单 击 更 新 按钮 时 ,在 更 新 操作 之 后 执行 
8 ItemUpdating 该 事件 发 生 在 单 击 更 新 按钮 时 ,在 更 新 操作 之 前 执行 
9 ModeChanged 该 事件 发 生 在 修改 数据 模式 时 ,CurrentMode 得 到 更 新 之 后 执行 
10 ModeChanging 该 事件 发 生 在 修改 数据 模式 时 ,CurrentMode 得 到 更 新 之 前 执行 
11 PageIndexChanged 该 事件 发 生 在 PageIndex 属性 的 值 更 改 时 ,在 分 页 操作 后 发 生 


12 PageIndexChanging 该 事件 发 生 在 PageIndex 属性 的 值 更 改 时 ,在 分 页 操作 前 发 生 
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【 例 6. 15】 利用 DetailsView 控件 来 实现 数据 的 输出 。 该 例 在 “设计 ”中 放置 了 一 个 
DetailsView 控件 和 一 个 SqlDataSource 控件 ,SqlDataSource 控件 用 来 连接 数据 源 , 配 置 数 
据 源 方法 同 前 。 在 DetailsView 控件 中 的 DataSourceID 属性 中 选择 此 SqlDataSource 控 
件 。 进 入 “ 源 ” 中 ,手工 加 入 2 个 Fields 对 象 ,分 别 在 每 个 Fields 对 象 中 编写 代码 。 具 体 
ex_6_15. aspx 文 件 代 码 如 下 : 


<%@ Page Language = "C#" RutoEventWireup = "true" CodeFile = "ex 6_15.aspx.cs" Inherits= 
"ex 6_15" %> 
<!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
<htm] xmlns = "http://www.w3.org/1999/xhtml" > 
< head runat = "server">< title> 无 标题 页 </title></head> 
<body> 
< form id = "forml" runat = "server"> 
<div> 
<asp:SqlDataSource ID = "SqlDataSourcel" runat = "server" ConnectionString= "<% $ 
ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand = "SELECT [CategoryID], [CategoryName], 
[Description], [Picture] FROM [Categories]"> 
</asp:SqlDataSource> 
<asp:DetailsView ID = "DetailsViewl" runat = "server" Height = "84px" 
Width = "266px" 
DataSourceID = "SqlDataSourcel”RutoGenerateRows = "False" 
HeaderText = " 目录 信息 ”HeaderStyle - BackColor = " 井 CC99FF" 
HeaderStyle - HorizontalAlign = "Center" AllowPaging = "True" 
PagerSettings - Position = "Bottom" RowStyle— VerticalAlign= "Top"> 
<Fields> 
<asp:BoundField HeaderText = "目录 " 
NullDisplayText = "没有 目录 " DataField = "CategoryName" /> 
<asp:BoundField HeaderText = "描述 " 
NullDisplayText = "没有 描述 ” DataField= "Description"/> 
</Fields > 
< RowStyle VerticalRlign = "Top" /> 
< HeaderStyle BackColor = "#CC99FF" HorizontalRlign = "Center" /> 
</asp:DetailsView> 
</div> 
</form> 
</body> 
</html > 


上 述 代码 中 的 二 Fields 二 标签 是 必要 的 。DataField 二 "CategoryName" 表 示 从 
SqlDataSourcel 数据 源 中 取出 CategoryName 列 的 值 。 最 终 执行 效果 如 图 6-13 所 示 。 

5) FormView 控件 

FormView 控件 用 于 显示 数据 源 中 的 单个 记录 。 该 控件 与 DetailsView 控件 类 似 , 只 是 
它 显示 用 户 定 义 的 模板 而 不 是 行 字段 。FormView 控件 支持 的 功能 与 DetailsView 控件 类 
似 。 不 同 点 表现 在 DetailsView 控件 能 够 自动 创建 HTML 表格 结构 代码 ,并 且 显 示 相 关 的 
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数据 字段 名 称 和 数据 值 。FormView 控件 则 默认 创 
建 一 个 空白 的 区 域 (实际 上 所 创建 的 是 一 个 只 有 一 
行 一 列 的 表格 ) 。FormView 控件 不 具备 自动 创建 
表格 显示 数据 的 功能 。FormView 控件 需要 开发 人 目 Beverages 
员 自 定义 ItemTemplate、PagerTemplate 等 模板 属 描 Sof drinks, coffees, teas, beers, and 
性 ,以 自 定义 方式 显示 各 个 字段 。 ee 

FormView 控件 支持 以 下 功能 : 四 支持 绑 定 到 
数据 源 控件 ; @ 内 置 数据 插入 .更 新 和 删除 功能 ; 
@ 内 置 分 页 功能 ，@ 允许 以 编程 方式 访问 图 6-13 DetailsView 控件 示例 效果 图 
FormView 控件 对 象 模型 ,以 动态 设置 属性 、 处 理事 
件 等 ; @ 通 过 用 户 定义 的 模板 .主题 和 样式 自 定 义 外 观 。 

通常 ,FormView 控件 用 于 更 新 和 插入 新 数据 记录 ,并 且 在 主 细 表 数据 处 理 方面 有 较 多 
应 用 。 实 现 这 些 应 用 ,FormView 控件 需要 数据 源 控件 的 支持 ,以 便 执行 诸如 更 新 ,插入 和 
删除 记录 的 任务 。 即 使 FormView 控件 的 数据 源 公开 了 多 条 记录 ,该 控件 一 次 也 只 显示 一 
条 数据 记录 。 在 该 模板 的 自 定 义 内 容 中 都 包含 了 数据 绑 定 表 达 式 ,如 : 二 % # Bind 
("columnNamel") %>。 

上 述 表 达 式 用 于 绑 定 数据 列 的 数据 。 如 果 在 模板 属性 中 包含 了 Bind 表达 式 ,那么 表明 
columnNamel 是 可 读 可 写 的 。 如 果 在 模板 属性 中 包含 Eval 表达 式 , 则 表明 columnNamel 
只 用 于 显示 数据 ,而 不 能 修改 该 数据 列 的 数据 。 

FormView 控件 作为 一 个 数据 绑 定 控件 ,可 与 数据 源 控件 结合 实现 各 种 数据 操作 。 当 
FormView 控件 通过 DataSourceID 属性 连接 数据 源 控件 后 ,该 控件 可 利用 数据 源 控件 的 内 
置 功能 ,在 自身 内 置 功能 的 支持 下 ,实现 数据 更 新 、 删 除 .添加 和 分 页 等 操作 。 与 GridView 
和 DetailsView 控件 不 同 的 是 ,由 于 FormView 控件 使 用 模板 属性 ,因此 ,没有 提供 自动 生 
成 命令 按钮 的 功能 。 开 发 人 员 必 须 在 模板 属性 中 ,自行 定义 各 种 命令 按钮 ,这样 才能 实现 数 
据 操作 功能 。DetailsView 控件 支持 的 模板 见 表 6-30。 

表 6-30 ”FormvView 控件 支持 的 模板 


模板 属性 说 明 
EditItemTemplate 获取 或 者 设置 在 编辑 模式 下 自 定义 项 的 内 容 
EmptyDataTemplate 获取 或 者 设置 当 DetailsView 控件 绑 定 空 的 数据 源 控 件 时 ,由 开发 人 员 定 


义 的 对 于 空 数据 所 呈现 模板 的 内 容 。 默 认 值 为 空 。 可 以 将 自 定义 模板 内 
容 放 在 二 EmptyDataTemplate 过 和 < 一 /EmptyDataTemplate 之 标签 之 中 。 
如 果 DetailsView 控件 中 同时 设置 了 该 属性 与 EmptyDataText 属性 ,那么 
EmptyDataTemplate 的 优先 级 比 EmptyDataText 高 

FooterTemplate 获取 或 者 设置 由 开发 人 员 自 定义 的 对 于 表 尾 行 所 呈现 模板 的 内 容 。 默 认 
值 为 空 。 可 以 将 自 定义 模板 内 容 放 置 在 二 FooterTemplate > 和 
二 /FooterTemplate 二 标签 之 中 。 如 果 同 时 设置 了 HealerText 属性 ,该 属 
性 将 覆盖 FooterText 所 设置 的 内 容 


模板 属 性 
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续 表 
说 明 


HeaderTemplate 


InsertItemTemplate 
ItemTemplate 


PagerTemplate 


获取 或 者 设置 由 开发 人 员 自 定义 的 对 于 表 头 行 所 呈现 模板 的 内 容 。 默 认 
值 为 空 。 可 以 将 自 定义 模板 内 容 放置 在 二 HeaderTemplate 之 和 
二 /HeaderTemplate 二 标签 之 中 。 如 果 同 时 设置 HeaderText 属性 ,该 属 
性 将 覆盖 HeaderText 所 设置 的 内 容 

获取 或 者 设置 在 插入 模式 下 自 定义 项 的 内 容 

获取 或 者 设置 在 只 读 模式 下 自 定义 数据 行 的 内 容 

获取 或 者 设置 由 开发 人 员 自 定义 的 对 于 分 页 行 所 呈现 模板 的 内 容 。 
默认 值 为 空 。 可 以 将 自 定 义 模 板 内 容 放 在 二 PagerTemplate 之 和 
一 /PagerTemplate 二 标签 之 中 


FormView 控件 的 常用 属性 、 常 用 事件 及 说 明 与 DetailsView 控件 相似 ,在 此 不 再 玖 述 。 

【 例 6.16】 该 例 说 明了 如 何 利用 FormView 控件 来 实现 数据 的 输出 。 该 例 在 “设计 ” 
中 放置 了 一 个 FormView 控件 和 一 个 SqlDataSource 控件 ,SqlDataSource 控件 用 来 连接 数 
据 源 , 配 置 数据 源 方法 同 前 。 在 FormView 控件 中 的 DataSourceID 属性 中 选择 此 
SqlDataSource 控件 。 进 入 “* 源 ”中 ,手工 加 入 上 述 模板 中 的 3 个 ,分 别 在 每 个 模板 中 编写 代 
码 。 具 体 ex_6_16. aspx 文件 代码 如 下 : 


< 外 四 Page Language = "C#" AutogventWireup = "true" CodeFile = "ex 6 _ 16.aspx.cs" Inherits= 


"ex 6 _16" $%> 


<!DOCTYPE htm]l PUBLIC " ~ //W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 ~ transitional. dtd"> 

< htm] xmlns = "http://www. w3.org/1999/xhtml" > 

< head runat = "server">< title > 无 标题 页 </title></head> 


<body> 


<form id = "forml" runat = "server"> 


<div> 


<asp:SqlDataSource ID = "SqlDataSourcel" runat = "server" 
ConnectionString = "<% $ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand = "SELECT [CategoryID], [CategoryName], [Description], [Picture] FROM 


[Categories]"> 


</asp:SqlDataSource> 
<asp:FormView ID = "FormViewl" runat = "server" 
DataSourceID = "SqlDataSourcel" AllowPaging = "True"> 
<HeaderTemplate> 


<table> 
Er 
<th> Name </th> <th> Description</th> 
</tr> 
</HeaderTemplate> 


< ItemTemplate> 


<tr> 
<td bgcolor = "#CCFFCC"> 
<asp:Label runat = "server" ID = "Labell" 
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Text = '<% 井 Eval("CategoryName") %>'/> 
</td> 

< td bgcolor = "#CCFFCC"> 

<asp:Label runat = "server" ID= "Label2" 
Text = '<% # Eval("Description") %>'/> 
</td> 

</tr> 
</ItemTemplate> 


< FooterTemplate></table></FooterTemplate> 
</asp:FormView > 
</div> 
</form> 
</body> 
</htm]l > 


上 述 代 码 中 ItemTemplate 是 必需 的 ,“ 二 % 并 Eval("CategoryName") % 二 ”表示 从 
SqlDataSourcel 数据 源 中 取出 CategoryName 列 的 值 。 显 示 效 果 如 图 6-14 所 示 。 


加 无 标题 页 - Microsoft Internet Explorer 


+ "小 -因由 剑 | 罗拉 辐 收 天 夺 扣 人 动 | 国 - 邹 加- 国 ” 
本 证 可 图 ntp:/ocahost:ssos7/ 控 件 lex_6_15.aspx 司 


Name Description 
Beverages Soft drinks, coffees, teas, beers, and ales 
12345678 


国 
[SE 
图 6-14 FormView 控件 示例 效果 图 


6) ReportViewer 控件 

VS 2010 已 经 内 置 了 报表 设计 功能 和 用 于 显示 报表 的 ReportViewer 服务 器 控件 。 
ReportViewer 服务 器 控件 用 来 呈现 表格 格式 数据 .聚合 数据 和 多 维 数据 , 它 可 以 图 表 的 形 
式 显示 数据 。ReportViewer 服务 器 控件 支持 的 图 表 有 柱 形 图 、 条 形 图 等 。 报 表 还 可 以 导出 
Excel 文件 和 PDF 文件 。ReportViewer 服务 器 控件 可 以 配置 成 以 本 地 处 理 模 式 或 远程 处 
理 模式 运行 。 

本 地 处 理 模式 是 指 ReportViewer 控件 在 客户 端 应 用 程序 中 处 理 报表 。 所 有 报表 都 是 
使 用 应 用 程序 提供 的 数据 作为 本 地 过 程 处 理 的 。 若 要 创建 本 地 处 理 模 式 下 使 用 的 报表 , 需 
要 使 用 Visual Studio 中 的 报表 项 目 模板 。 该 模式 所 有 数据 和 报表 的 处 理 都 是 在 客户 端 进 
行 的 ,在 处 理 大 型 或 复杂 的 报表 和 查询 时 ,应 用 程序 性 能 可 能 会 降低 。 

“远程 处 理 模 式 ” 是 指 由 SQL Server 2005 Reporting Services 报表 服务 器 处 理 报表 。 在 
远程 处 理 模 式 下 ,ReportViewer 控件 用 作 查 看 器 .显示 已 经 在 Reporting Services 报表 服务 
器 上 发 布 的 预定 义 报 表 。 从 数据 检索 到 报表 呈现 的 所 有 操作 都 是 在 报表 服务 器 上 处 理 的 。 
车 要 使 用 远程 处 理 模 式 , 则 必须 具有 SQL Server 2005 Reporting Services 的 许可 副本 。 

注意 : Internet Explorer 6.0 以 上 版 本 浏览 器 是 唯一 保证 支持 用 于 报表 的 全 套 功 能 的 
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浏览 器 ,其 他 浏览 器 只 支持 部 分 功能 。ReportViewer 控件 中 常用 的 属性 如 表 6-31 所 示 。 


表 6-31 ReportViewer 控件 中 常用 的 属性 


事 件 说 明 
AsyncRendering 指明 ReportViewer 控件 是 否 以 异步 方式 呈现 报表 
BackColor 获取 或 设置 控件 报表 区 域 的 背景 颜色 
CurrentPage 获取 或 设置 ReportViewer 控件 活动 报表 的 当前 页 
DocumentMapCollapsed 获取 或 设置 文档 结构 图 的 折 释 状态 


Document MapWidth 
ExportContentDisposition 
HyperlinkTarget 
LinkActiveColor 
LinkActiveHoverColor 
ProcessingMode 
PromptAreaCollapsed 
ServerReport 
ShowCredentialPrompts 
ShowExportControls 
WaitMessageFont 
ZoomMode 


ZoomPercent 


【 例 6. 17】 


获取 或 设置 文档 结构 图 的 宽度 

指明 内 容 应 以 内 联 方式 存在 还 是 作为 附件 存在 

获取 或 设置 单 击 报表 中 的 超 链接 时 返回 网 页 内 容 的 目标 窗口 或 框架 
获取 或 设置 控件 中 的 活动 链接 的 颜色 

获取 或 设置 当 鼠 标 指针 处 于 控件 中 的 活动 链接 上 时 该 链接 的 颜色 
获取 或 设置 ReportViewer 控件 的 处 理 模 式 

折 秋 或 还 原 ReportViewer 控件 的 提示 区 域 

获取 报表 查看 器 中 的 服务 器 报表 

指明 是 否 会 显示 要 求 用 户 凭据 的 提示 

指明 控件 上 的 “导出 ”控件 是 否 可 见 

执行 报表 时 显示 的 消息 所 采用 的 字体 

获取 或 设置 控件 的 缩放 模式 

获取 或 设置 显示 报表 时 使 用 的 缩放 百分比 


该 例 说 明了 如 何 利 用 ReportViewer 控件 来 实现 数据 的 输出 。 该 例 在 “ 设 


计 ” 中 放置 了 一 个 ReportViewer 控件 和 一 个 SqlDataSource 控件 ,SqlDataSource 控件 用 来 
连接 数据 源 ,配置 数据 源 方 法 同 前 。 在 ReportViewer 控件 中 的 DataSourceID 属性 中 选择 
此 SqlDataSource 控件 。 按 照 ReportViewer 控件 向 导 一 步 步 完成 向 导 配 置 。 

具体 ex_6_17. aspx 文件 代码 如 下 : 


<%@ Page Language = "C#" AutogventWireup = "true" CodeFile = "ex 6 _17.aspx.cs" Inherits= 


verde sy 


<% @ Register Assembly = "Microsoft. ReportViewer. WebForms, Version = 8.0.0.0, Culture = 
neutral, PublicKeyToken = b03f5f7f11d50a3a" 

Namespace = "Microsoft. Reporting. WebForms" TagPrefix= "rsweb" $%> 
<!DOCTYPE html PUBLIC " ~ //W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
< script runat = "server"> 
protected void ReportViewerl Load(object sender, EventArgs e) 


{ 


this. ReportViewer1. LocalReport. EnableExternalImages = true; 


}</script > 


<html xmlns = "http://www. w3.org/1999/xhtml" > 


< head runat = "server"> 


<title> 无 标题 页 </title> 


</head> 
<body> 
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< form id= "forml" runat = "server"> 
<div> 
<asp:SqlDataSource ID = "SqlDataSourcel" runat = "server" 
ConnectionString= "<% $ 
ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand = " SELECT [CategoryID], [CategoryName], [Description], [Picture] 
FROM [Categories]"> 
</asp:SqlDataSource> 
< rsweb: ReportViewer ID = "ReportViewerl" runat = "server" Font — Names = " Verdana” 
Font — Size= "8pt" 
Height = "400px" OnLoad = "ReportViewerl Load" Width = "400px"> 
< LocalReport ReportPath = "Report1. rdlc"> 
<DataSources> 
< rsweb: ReportDataSource DataSourceId = " ObjectDataSourcel" Name = 
"DataSet1_Categories" /> 
</DataSources> 
</LocalReport > 
</rsweb:ReportViewer > 
< asp: ObjectDataSource ID = "ObjectDataSourcel" runat = " server" SelectMethod = 
"GetData" 
TypeName = "DataSetlTableAdapters. CategoriesTableAdapter"> 
</asp:ObjectDataSource> 
</div> 
</form> 
</body></html> 


显示 效果 如 图 6-15 所 示 。 


下 无 标题 页 - Microsoft Internet Explorer 


+ 让- 小 - 因 因 全 | 罗拉 过 甸 收 天 者 提 作 地 | 国 - 双 
随 直 gj 固 http:/hiocalhost:55097/ 控 件 /ex_6_16.aspx 7] 必 转 到 | 情 接 ” 


14 4 /lib vi 100% 司 
[ 厂 ，” 考 雹 | 下 一 个 [选择 格式 司 Sd 国 


Category Nane Description 

Beverages Soft drinks, coffees, teas, 
beers, and ales 

Condiments Sweet and savory sauces, 


relishes, spreads, and 
seasonings 

Confections Desserts, candies, and 
sweet breads 


图 6-15 ReportViewer 控件 示例 效果 图 


3. 正确 使 用 GridView、Repeater 和 DataList 控件 

数据 绑 定 控件 GridView、Repeater 和 DataList 是 显示 数据 的 有 力 控 件 。 其 中 
GridView 是 迄今 为 止 功 能 最 为 丰富 的 数据 显示 控件 ,大 部 分 功能 可 通过 属性 设置 来 完 
甚至 不 需要 编写 一 行 代码 就 能 实现 强大 的 数据 处 理 功能 。 许 多 初学 者 在 进行 Web 开发 时 ， 
只 要 遇 到 数据 处 理 或 显示 就 习惯 性 地 使 用 GridView 控件 。 虽 然 使 用 GridView 大 大 减少 
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了 开发 者 的 编程 工作 量 , 但 最 大 的 问题 就 是 该 控件 在 处 理 数据 时 需要 占用 很 多 Web 服务 器 
资源 ,生成 在 客户 端 呈 现 的 HTML 文件 也 非常 大 ,而 且 只 能 以 表格 形式 输出 数据 ,最 终 导 
致 系统 响应 性 能 降低 。 我 们 建议 在 用 户 数 据 量 不 大 且 不 需要 出 色 的 界面 效果 ,特别 是 当 需 
要 编辑 、 分 页 ,排序 功能 的 时 候 , 使 用 该 控件 有 事半功倍 的 效果 。 但 当 数 据 量 很 大 的 时 候 ,要 
求 系统 有 较 快 的 处 理性 能 ,具有 更 好 的 显示 效果 的 时 候 推荐 使 用 Repeater 控件 ,Repeater 
控件 允许 对 用 户 通 过 模板 自 定义 数据 项 的 输出 ,处 理 速度 非常 快 。 但 Repeater 控件 的 缺点 
是 ,必须 在 各 个 模板 中 进行 手工 编写 代码 ,对 于 分 页 、 排 序 、 编 辑 等 都 必须 编写 代码 。 
DataList 控件 的 使 用 性 能 介 于 GridView 和 Repeater 之 间 。 可 在 DataList 中 通过 属性 设置 
定义 各 个 模板 ,然后 部 分 地 通过 编程 实现 分 页 .排序 ,数据 编辑 等 功能 。 


6.3 Web. config 文件 的 配置 


ASP.NET 的 应 用 程序 配置 文件 web. config 是 基于 XML 格式 的 纯 文本 文件 ,存在 于 
应 用 的 各 个 目录 下 。 它 决定 了 站 点 所 在 目录 及 其 子 目 录 的 配置 信息 ,并 且 子 目录 下 的 配置 
信息 覆盖 其 父 目 录 的 配置 。 

Windows\Microsoft. NET\Framework\v2. 0. 50727\CONFIG 下 的 web. config 为 整 
个 机 器 的 根 配 置 文 件 , 它 定义 了 整个 环境 下 的 默认 配置 。 实 际 上 它 继承 了 Windows\ 
Microsoft. NET\ Framework\v2. 0. 50727\CONFIG\ Machine. config 的 配置 设置 和 默认 
值 。Machine. config 文件 用 于 服务 器 级 的 配置 设置 。 其 中 的 某 些 设置 不 能 在 位 于 层次 结构 
中 较 低 级 别 的 配置 文件 中 被 重 写 。 

在 运行 状态 下 ,ASP. NET 会 根据 远程 URL 请 求 ,把 访问 路 径 下 的 各 个 web. config 配 
置 文件 琶 加 ,产生 一 个 唯一 的 配置 集合 。 例 如 ,对 于 一 个 对 URL 一 一 http://localhost/ 
webapp/mydir/ test. aspx 的 访问 ,ASP. NET 会 根据 以 下 顺序 来 决定 最 终 的 配置 情况 , 

Windows\Microsoft. NET\Framework\v2. 0. 50727\CONFIG\web. config( 上 默认 配置 ); 

一 /web. config( 应 用 程序 主 目录 下 的 配置 ); 

一 /mydir/web. config( 当 前 自己 的 配置 )。 

配置 内 容 被 置 于 web. config 文件 中 的 标记 过 configuration 二 和 二 /configuration 二 之 
间 。 对 于 一 般 性 Web 应 用 开发 来 说 ,一 般 仅 对 一 /web. config 文件 进行 配置 。 一 个 典型 的 
配置 文件 内 容 如 例 6. 18 所 示 。 

【 例 6.18】 一 个 典型 的 配置 文件 。 内 容 如 下 : 


<?xml version= "1.0"?> 
<configuration> 
<appSettings > 
<add key = "dsn" value = "localhost;uid = MyUserName; pwd = ;"/> 
<add key = "msmqserver" value = "server\myqueue"/> 
</appSettings> 
< connectionStrings > 
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< add name = " NorthwindConnectionString" connectionString = "Data Source = WCLNOTE; 
Initial Catalog = Northwind; Persist Security Info = True; User ID = sa; Password = docman" 
providerName = "System. Data. SqlClient"/> 
</connectionStrings> 
< system.web> 
<authentication mode = "Forms"> 
< forms loginUrl = "logon. aspx" name = ".FormsAuthCookie"/> 


<authorization> 
<allow users="*"/> <!-- Allowall users --> 
<! -- Allow or deny specific users. 


allow users = "[comma separated list of users]" 
roles = "[comma separated list of roles]"/> 
< deny users = " [comma separated list of users]" 
roles = "[comma separated list of roles]"/> --> 

</authorization> 
</authentication> 
< customErrors mode = "RemoteOnly" defaultRedirect = "~ /ErrorPage/ ErrorPage. htm"> 

< error statusCode = "403" redirect = "NoAccess. htm"/> 

< error statusCode = "404" redirect = "FileNotFound. htm" /> 
</customErrors> 
< httpRuntime maxRequestLength = "4096" executionTimeout = "60" 

appRequestQueueLimit = "100"/> 

< pages buffer = "true" enableViewState = "true" enableSessionState = "true" /> 
< sessionState sqlConnectionString = "data source= 127.0.0.1;user 

id = sa;password=" cookieless = "false" timeout = "10"/> 
<trace enabled = "false" requestLimit = "10" pageOQutput = "false" 

traceMode = "SortByTime" localOnly= "true"/> 
<! -- 全球 化 一 此 节 设置 应 用 程序 的 全 球 化 设置 --> 
<globalization requestEncoding = "utf - 8" responseEncoding = "utf ~ 8"/> 
< compilation debug = "true"/></system. web> 

</configuration> 


要 深刻 理解 和 领会 Web. config 的 使 用 对 初学 者 来 说 是 困难 的 。 对 于 一 般 性 的 应 用 程 
序 来 说 应 掌握 以 下 几 个 配置 用 法 。 

1. 二 appSettings 二 节 

作用 : 存储 用 户 应 用 程序 中 的 键 值 对 。 例 如 下 面 定义 了 一 个 键 值 对 : 


<add key = "myURL" value = "http://www. cqu. edu.cn"/> 


在 后 台 服 务 器 程序 中 就 可 以 通过 使 用 ConfigurationManager. AppSettings 静态 字符 串 集合 
来 访问 。 在 后 台 C# 程 序 中 要 取 到 键 myURL 的 值 ,代码 为 : 


string myURL = System.Configuration.ConfigurationManager. AppSettings ["myURL"]; 
Response. Write(myURL);  // 输 出 "http://www. cqu. edu. cn" 


可 以 将 应 用 程序 中 的 参数 通过 appSettings 节 放 在 配置 文件 中 ,以 后 参数 值 变 化 ,只 需要 修 
改 配置 文件 中 的 参数 值 即 可 。 
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2. 二 connectionStrings 二 节 


作用 : 存储 应 用 程序 中 访问 数据 库 的 相关 连接 参数 。 例 如 下 面 定义 了 一 个 连接 数据 库 
Northwind 的 相关 参数 ,包括 3 个 部 分 ,分 别 是 name .connectionString 和 providerName。 


<add name = "NorthwindConnectionString" connectionString = "Data Source = WCLNOTE; Initial 
Catalog = Northwind; Persist Security Info = True; 

User ID = sa;Password = docman" 

providerName = "System. Data. SqlClient"/> 


在 后 台 C# 程 序 中 要 取 到 上 述 3 个 参数 的 值 .代码 为 : 


string MyName = ConfigurationManager.ConnectionStrings ["NorthwindConnectionString"]. Name; 
string myConn = ConfigurationManager. ConnectionStrings [ " NorthwindConnectionString"]. 
ConnectionString; 

string myProviderName = ConfigurationManager.ConnectionStrings 
["NorthwindConnectionString"].ProviderName; 

Response. Write(MyName +","+ myConn +","+ myProviderName); 


若 存 在 多 个 数据 库 配 置 参数 设置 ,可 通过 下 面 的 C# 代 码 获得 每 个 数据 库 连 接 参数 


// Get the connectionStrings， 
ConnectionStringSettingsCollection connectionStrings = 


ConfigurationManager. ConnectionStrings; 
// Get the collection enumerator. 
System. Collections. IEnumerator connectionStringsEnum = 
connectionStrings. GetEnumerator( ); 
// Loop through the collection and display the connectionStrings key, value pairs. 
int i = 0; 
Response. Write( "< br/> Connection strings.< br/>"); 
while (connectionStringsEnum. MoveNext( )) 
{ string name = connectionStrings[i].Name; 
Response. Write("Name:" + name + " Value:" + connectionStrings[name]); 
| 


} 
3. 二 authentication 二 节 
作用 : 配置 ASP. NET 身份 验证 支持 ,例如 以 下 代码 实现 了 当 没 有 经 过 登录 验证 的 用 
户 访问 需要 身份 验证 的 网 页 时 ,网 页 自动 跳 转 到 登录 网 页 logon. aspx。 
<authentication mode = "Forms" > 


< forms loginUrl = "logon. aspx" name = ".FormsAuthCookie"/> 
</authentication> 


4. 二 authorization 二 节 


作用 : 控制 对 URL 资源 的 客户 端 访问 (如 允许 匿名 用 户 访问 )。 此 元 素 必 须 与 
二 authentication 祖 节 配 合 使 用 。 例 如 以 下 配置 禁止 匿名 用 户 的 访问 : 


<authorization> 
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< deny users = "?"/> 
</authorization> 


5. 一 compilation 二 节 

作用 : 配置 ASP.NET 使 用 的 所 有 编译 设置 。 默 认 的 debug 属性 值 为 true。 在 程序 编 
译 完 成 交付 使 用 之 后 应 将 其 设 为 true。 

6. 一 customErrors 二 节 

作用 : 为 ASP. NET 应 用 程序 提供 有 关 自 定义 错误 信息 的 信息 。 它 不 适用 于 XML 
Web Services 中 发 生 的 错误 。 例 如 当 网 页 发 生 错误 时 ,将 网 页 跳 转 到 自 定义 的 错误 页 面 ; 


< customErrors defaultRedirect = "ErrorPage.aspx" mode = "RemoteOnly"> 
</customErrors> 


其 中 元 素 defaultRedirect 表示 自 定义 的 错误 网 页 的 名 称 。mode 元 素 表 示 对 不 在 本 地 Web 
服务 器 上 运行 的 用 户 显 示 自 定义 信息 。 

7. 过 httpRuntime 二 节 

作用 : 配置 ASP.NET HTTP 运行 库 设 置 。 例 如 控制 用 户 上 传 文件 最 大 为 4 MB, 最 
长 时 间 为 60s, 最 多 请 求 数 为 100: 


< httpRuntime maxRequestLength = "4096" executionTimeout = "60" appRequestQueueLimit = "100"/> 


8. 二 pages 二 
作用 : 标识 特定 于 页 的 配置 设置 ,如 是 否 启用 会 话 状态 、 视 图 状态 .是 否 检测 用 户 的 输 
和 等。 例如 ， 


< pages buffer = "true" enableViewState = "true" enableSessionState = "true" /> 


9. =sessionState> 
作用 : 为 当前 应 用 程序 配置 会 话 状 态 设置 , 如 设置 是 否 启用 会 话 状 态 、 会 话 状态 保存 位 
置 等 。 例 如 : 


< sessionState mode = "InProc" cookieless = "true" timeout = "20"/> 


注 : mode 一 "InProc" 表 示 在 本 地 储存 会 话 状态 (你 也 可 以 选择 储存 在 远程 服务 器 或 不 
启用 会 话 状态 等 ); cookieless 二 "true" 表 示 如 果 用 户 浏览 器 不 支持 Cookie 时 启用 会 话 状 态 
(默认 为 false); timeout 一 "20" 表 示 设 置 会 话 可 以 处 于 空闲 状态 的 分 钟 数 。 

10. =trace> 

作用 : 配置 ASP. NET 跟踪 服务 ,主要 用 来 测试 和 判断 程序 哪里 出 错 。 例 如 : 


< trace enabled = "false" requestLimit = "10" pageOutput = "false" traceMode = "SortByTime" 
localOnly= "true" /> 
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注 : enabled 二 "false" 表 示 不 启用 跟踪 ; requestLimit 王 "10" 表 示 指 定 在 服务 器 上 存储 
的 跟踪 请 求 的 数目 。pageOutput 一 "false" 表 示 只 能 通过 跟踪 实用 工具 访问 跟踪 输出 ; 
traceMode 王 "SortByTime" 表 示 以 处 理 跟 踪 的 顺序 来 显示 跟踪 信息 ; localOnly 二 "true" 表 
示 跟 踪 查 看 器 只 用 于 宿主 Web 服务 器 。 


6.4 ASP.NET 内 置 服务 器 对 象 与 Global. asax 文件 


6.4.1 ASP.NET 内 置 服务 器 对 象 


ASP.NET 提供 了 如 表 6-32 所 示 的 常用 内 置 服务 器 对 象 。 这 些 对 象 提供 了 相当 多 的 
功能 ,例如 可 以 在 两 个 网 页 之 间 传 递 变量 .输出 数据 以 及 记录 变量 值 等 。 这 些 对 象 可 以 在 后 
台 服 务 器 代码 中 直接 使 用 ,不 需要 作 任 何 说 明 。 


表 6-32 ASP. NET 常用 内 置 服务 器 对 象 


对 象 名 称 说 明 
Page 对 象 用 来 指 代 Web 窗 体 ,设置 或 执行 与 Web 窗 体 有 关 的 属性 、 方 法 和 事件 
Response 对 象 决定 服务 器 在 什么 时 候 或 如 何 输出 数据 到 客户 端 
Request 对 象 用 来 捕获 由 客户 端 返 回 到 服务 器 的 数据 
Server 对 象 获取 Web 服务 器 对 象 的 各 项 参数 
Application 对 象 处 理由 不 同 客户 端 共 享 的 变量 
Session 对 象 处 理由 各 个 客户 端 专用 的 变量 
Cookies 对 象 为 Web 应 用 程序 保存 访问 者 的 信息 


下 面 分 别 对 ASP. NET 的 这 些 内 置 对 象 进行 介绍 。 

1. Page 对 象 

Page 对 象 指 代 Web 窗 体 , 它 提供 了 许多 属性 、 方 法 和 事件 。 在 执行 一 个 Web 窗 体 时 ， 
首先 会 进行 网 页 的 初始 化 ,触发 Page 对 象 的 Init 事件 ; 然后 加 载 网 页 ,触发 Load 事件 ; 再 
加 载 服务 器 控件 ,根据 客户 端的 请 求 触发 服务 器 控件 的 事件 ; 访问 结束 并 且 信 息 被 写 回 客 
户 端 后 ,触发 Unload 事件 ; 如 果 在 访问 过 程 中 发 生 异 常 , 则 会 触发 Error 事件 。 

Page 对 象 的 一 个 常用 的 属性 是 IsPostBack, 它 判断 网 页 是 否 已 被 加 载 过 ,第 一 次 加 载 
网 页 的 时 候 为 false, 如 果 已 经 加 载 过 , 则 为 true。 利 用 此 属性 ,可 以 在 Page 的 Load 事件 中 
编写 如 下 代码 : 


public partial class _default: System. Web. UI. Page 
{ protected void Page Load(object sender, EventArgs e) 
{ // 第 一 次 加 载 此 页 面 显示 OK 对 话 框 , 以 后 单 击 Web 窗 体 按钮 重新 装载 此 页 面 将 不 再 显示 
if (!Page. IsPostBack) { 
string myScript = "< script>alert('ok');</script >"; 
Page. RegisterClientScriptBlock("myscript1", myScript); 


} 


Page 对 象 的 另 一 个 常用 的 属性 是 ErrorPage, 可 以 获取 或 设置 当 页 面 发 生 未 处 理 的 异 
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常情 况 时 将 用 户 请 求 定向 到 错误 信息 页 面 。 
Page 对 象 的 常用 方法 包括 : 
MapPath(VirtualPath) ,将 VirtualPath 指定 的 虚拟 路 径 转 换 成 实际 路 径 。 
RegisterClientScriptBlock(key,script) ,发 送 客户 端 脚本 Script 给 浏览 器 。 
RegisterOnSubmitStatement(key,script) ,设置 当 客 户 端 发 生 OnSubmit 事件 时 所 
要 执行 的 Script 代码 。 


2 


Response 对 象 


Response 对 象 派生 自 HttpResponse 类 。 它 的 主要 功能 是 将 服务 器 端的 数据 输出 到 客 
户 端 。 它 属于 Page 对 象 的 成 员 , 所 以 不 用 定义 便 可 直接 使 用 。Response 对 象 的 常用 属性 
及 说 明 如 表 6-33 所 示 , Response 对 象 常用 方法 及 说 明 如 表 6-34 所 示 。 


表 6-33 Response 对 象 常用 属性 及 说 明 
序号 属 性 说 明 
1 Cache 获取 Web 页 的 缓存 策略 
2 Charset 设 定 或 获取 HTTP 的 输出 字符 编码 
3 Expires 获取 或 设置 在 浏览 器 上 缓存 的 页 过 期 之 前 的 分 钟 数 
4 Cookies 获取 当前 请 求 的 Cookie 集合 
5 IsClientConnected 传 回 客户 端 是 否 仍然 和 Server 连接 
6 SuppressContent 设 定 是 否 将 HTTP 的 内 容 发 送 至 客户 端 浏览 器 
表 6-34 ”Response 对 象 常用 方法 及 说 明 
序号 方 ”法 说 明 
AppendToLog 将 自 定义 日 志 信息 添加 到 IS 日 志文 件 
2 Clear 清除 缓冲 区 的 内 容 
3 End 将 目前 缓冲 区 中 所 有 的 内 容 发 送 至 客户 端 然 后 关闭 
4 Flush 将 缓冲 区 中 的 所 有 数据 发 送 至 客户 端 
5 Redirect 将 当前 页 面 重 新 导向 至 另 一 个 地 址 的 页 面 
6 Write 将 数据 输出 到 HTTP 响应 输出 流 
和 WriteFile 将 指定 的 文件 直接 写 人 HTTP 响应 输出 流 


【 例 6.19】 利用 Response 对 象 将 本 地 的 某 个 文件 的 内 容 写 入 HTTP 输出 流 , 并 显示 
“ 写 入 成功" 字样。 在 VS 2010 中 新 建 一 个 空 的 Web 窗 体 ex_6_19. aspx, 编 写 ex_6_19. 
aspx. cs 文件 的 代码 如 下 : 


using System; 
using System. Web; 
using System. Web. UI; 
using System. Web. UI. WebControls; 
public partial class _Default : System. Web. UI. Page 

// 加 载 页 面 _Default.aspx 时 触发 事件 
protected void Page_Load(object sender, EventArgs e) 


{ 


{ 


Response. WriteFile(@"E:\Example\Sample. txt"); 


Response. Write("< br >"); 


Response. Write(" 写 人 成 功 !"); 
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3. Request 对 象 


Request 对 象 派 生 自 HttpRequest 类 ,用 来 捕获 由 客户 端 返回 服务 器 端的 数据 ,比如 用 
户 输入 的 表单 数据 .保存 在 客户 机 上 的 Cookie 等 。 

1) 读 取 表单 数据 

利用 Request 对 象 读 取 表单 数据 的 方式 取决 于 表单 数据 返回 服务 器 的 方式 ,其 方式 有 
两 种 : post 和 get, 使 用 哪 种 方式 是 通过 设置 Method 属性 来 实现 的 。 当 为 get 时 ,表单 数据 
将 以 字符 串 的 形式 附加 在 网 址 的 后 面 返回 服务 器 端 ,此 时 应 用 Request 对 象 的 QueryString 
属性 来 获取 表单 数据 ,例如 Request. QueryString("UserName"); 当 为 post 时 ,表单 数据 将 
存放 在 HTTP 报头 中 ,此 时 应 使 用 Request 对 象 的 Form 属性 来 获取 表单 数据 ,例如 
Request. Form("UserName"); 如 果 想 避免 因为 QueryString 属性 和 Form 属性 使 用 不 当 
而 造成 错误 ,可 以 直接 使 用 Params, 例 如 Request. Params("UserName"); 也 可 省 略 所 有 属 
性 ,直接 读 取 表单 数据 Form ,例如 Request("UserName")。 

【 例 6.20】 用 Request 对 象 获取 表单 信息 ,并 将 信息 在 页 面 中 输出 。ex_6_20. aspx 代 
码 如 下 : 


<%@ Page Language = "C#" AutogventWireup = "true" CodeFile = "ex 6_20.aspx.cs" Inherits = 
"ex 6 20" %> 
<html xmlns = "http://www. w3. org/1999/xhtml1"> 
< head runat = "server"> <title> 无 标题 页 </title></head> 
<body style= "text ~- align: center"> 
<form id = "forml" runat = "server" method= "post" action= "test.aspx"> 
<table> 
<tr><td style= "width: 100px"> 姓名 </td> 
<td style= "width: 100px"> 
<asp:TextBox ID = "name" runat = "server"></asp:TextBox></td> 
</tr><tr> 
<td style= "width: 100px"> 邮箱 </td> 
<td style= "width: 100px"> 
<asp:TextBox ID = "email" runat = "server"></asp:TextBox></td> 
</tr><tr> 
<td colspan= "2"> 
<asp:Button ID = "Buttonl" runat = "server" OnClick= 
"Buttonl1_Click" Text = "Button" /> 


</td> </tr> 
</table> 
</form> 
</body> 
</html> 


ex_6_20. aspx. cs 代码 如 下 : 


using System; 

using System. Data; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 

public partial class ex 6 20 : System.Web.UI.Page 
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protected void Buttonl1 Click(object sender, EventArgs e) 
{ string name = Request["name"].ToString();// 通 过 Request 对 象 获 取 姓 名 信息 ; 
string email = Request["email"].ToString();// 通 过 Request 对 象 获取 邮箱 信息 ; 
Response. Write(" 您 的 姓名 是 : ”+ name + " 您 的 邮箱 是 ”+ email);// 在 页 面 输出 信息 ; 
! 
} 


2) 获取 客户 端 浏览 器 信息 

Request 对 象 的 Browser 属性 可 以 获取 HttpBrowserCapabilities 对 象 ,从 而 获取 当前 
和 服务 器 连接 的 浏览 器 的 信息 。 

【 例 6.21】 用 Request 对 象 获取 浏览 器 信息 。ex_6_21. aspx. cs 代码 如 下 ; 


using System; 

using System. Data; 

using System. Web. UI; 

public partial class Ex 6 21: System. Web. UI.Page 

protected void Page Load(object sender, EventArgs e) 

{ string info = "浏览 器 信息 :<br> 浏览 器 :" + Request. Browser.Type + "<br>" + "名 
称 :”+ Request.Browser.Browser + "<br> 版 本 :” + Request. Browser. Version + "<br> 使 用 平 
台 :" + Request.Browser.Platform; 

this. lab_info. Text = info; 
} 
J 


3) 获取 服务 器 端的 相关 信息 
Request 对 象 的 ServerVariables 属性 可 以 获取 服务 器 端 有 关 信息 ,下面 的 代码 演示 了 
如 何 输出 服务 器 端 所 有 信息 和 仅 输出 服务 器 的 IP 地 址 。 


string sl = Request.ServerVariables. ToString(); 

Response. Write(Server.Urldecode(s1)); ”// 输 出 服务 器 端的 所 有 信息 
string sl = Request.ServerVariables["REMOTE ADDR"].ToString(); 
Response. Write(Server. Urldecode(s1)); ”// 输 出 服务 器 的 IP 地 址 


ServerVariables 属性 中 的 常用 服务 器 环境 变量 如 表 6-35 所 示 。 
表 6-35 常用 服务 器 环境 变量 


变 量 说 明 
APPL_PHYSICAL_PATH ”检索 与 元 数据 库 路 径 相 应 的 物理 路 径 。IIS 通过 将 APPL_MD_PATH 转 
换 为 物理 (目录 ) 路 径 以 返回 值 
CONTENT_LENGTH 客户 端 发 出 内 容 的 长 度 
CONTENT_TYPE 内 容 的 数据 类 型 。 同 附加 信息 的 查询 一 起 使 用 ,如 HTTP 查询 GET、 
POST 和 PUT 


GATEWAY_INTERFACE 服务 器 使 用 的 CGI 规格 的 修订 。 格 式 为 CGI/revision 
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续 表 
变 量 说 明 

LOCAL_ADDR 返回 接受 请 求 的 服务 器 地 址 。 如 果 在 绑 定 多 个 了 P 地 址 的 多 宿主 机 器 上 
查找 请 求 所 使 用 的 地 址 时 ,这 条 变量 非常 重要 

LOGON_USER 用 户 登录 Windows NT® 的 账号 

QUERY_STRING 查询 HTTP 请 求 中 问号 (?) 后 的 信息 

REMOTE_ADDR 发 出 请 求 的 远程 主机 的 IP 地 址 

REMOTE_HOST 返回 发 出 请 求 的 主机 名 称 。 如 果 服 务 器 无 此 信息 , 它 将 设置 为 空 的 
MOTE_ADDR 变量 

REMOTE_USER 返回 请 求 的 用 户 名 

REQUEST_METHOD 该 方法 用 于 得 到 请 求 方法 。 如 HTTP 的 GET、POST 等 

SCRIPT_NAME 执行 脚本 的 虚拟 路 径 

SERVER_NAME 服务 器 主机 名 或 IP 地 址 

SERVER_PORT 发 送 请 求 的 端口 号 

URL 提供 URL 的 基本 部 分 


4. Application 对 象 
Application 对 象 可 以 生成 一 个 Web 应 用 程序 能 共享 的 变量 ,所 有 访问 这 个 网 站 的 用 
户 都 可 以 共享 此 变量 。Application 对 象 常用 的 属性 及 说 明 如 表 6-36 所 示 。 
表 6-36 Application 对 象 常用 属性 及 说 明 


序 号 属 性 说 明 
1 AllKeys 返回 全 部 Application 对 象 变量 名 到 一 个 字符 串 数组 中 
2 Count 获取 Application 对 象 变量 的 数量 
3 Item 允许 使 用 索引 或 Application 变量 名 称 传 回 内 容 值 


Application 对 象 常用 方法 及 说 明 如 表 6-37 所 示 。 
表 6-37 Application 对 象 常用 方法 及 说 明 


序 号 方 法 说 明 
1 Add 新 增 一 个 Application 对 象 变量 
2 Clear 清除 全 部 Application 对 象 变量 
3 Lock 锁定 一 个 或 全 部 Application 对 象 变量 
4 Remove 使 用 变量 名 称 移 除 一 个 Application 对 象 变量 
5 RemoveAll 移 除 全 部 Application 对 象 变量 
6 Set 使 用 变量 名 称 更 新 一 个 Application 对 象 变量 的 内 容 
Unlock 解除 锁定 的 Application 对 象 变量 


【 例 6.22】 通过 使 用 Application 对 象 向 Web 中 添加 3 个 对 象 变量 ,并 将 这 些 变 量 名 
称 及 值 显示 在 Web 页 面 。 实 现 这 一 功能 的 ex_6_22. aspx. cs 文件 代码 如 下 : 
using System; 


using System. Data; 
using System. Web; 
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using System. Web. UI; 
public partial class Default : System. Web.UI.Page 
{ ”// 加 载 页面 _Default.aspx 时 触发 事件 
protected void Page Load(object sender, EventArgs e) 
{ Application.Add("AppOne", "schoo]"); 
Application. Add( "AppTwo", "university"); 
Application. Add("AppThree", "college"); 
for (int i = 0; i<3; i++) 
{ ”Response. Write(" 变 量 名 :" + Application. GetKey(i)); 
Response. Write(", 值 :" + Application[i] + "<p>"); } 


运行 后 的 效果 如 图 6-16 所 示 。 


昼 无 标题 页 - Microsoft Internet Explorer 


| 
FE "小 "加 因 集 | 四 二 因 收 天 稳 桨 作 通 | 芭 ” ” 
WE [ 掉 http:/ /ocahost:4268/testi test.aspx | PS 到 链接 ” 


变量 名 :AppOne, 值 :shool 
变量 名 :AppTwo, 值 :university 


变量 名 :AppThree, 值 :college 


到 
间 和 三 三 原 5amane 用 
图 6-16 ”Application 对 象 的 应 用 


由 于 Application 对 象 属于 网 站 的 全 局 变量 ,因此 经 常会 出 现 多 人 同时 访问 和 修改 该 对 
象 的 情况 。 为 了 避免 多 个 用 户 同 时 修改 Application 对 象 ,需要 在 修改 前 用 Lock 锁定 
Application 对 象 ,修改 后 再 用 Unlock 解锁 Application 对 象 。 用 Application 对 象 可 实现 网 
站 访问 计数 器 功能 。 由 于 Application 对 象 一 直 会 占用 服务 器 资源 ,因此 应 用 Remove 等 可 
及 时 清理 无 用 的 Application 变量 。 

5. Session 会 话 对 象 

Session 对 象 的 功能 和 Application 对 象 的 功能 相似 ,都 是 用 来 存储 跨 网 页 程序 的 变量 
(包括 对 象 )。 但 Session 对 象 只 针对 单一 访问 网 站 的 用 户 , 用 Session 对 象 定 义 的 变量 可 
在 某 个 用 户 打开 的 多 个 网 页 之 间 共 享 , 相 当 于 网 站 的 “局 部 ”变量 。 在 服务 器 上 将 保存 各 
个 联机 的 机 器 的 Session 对 象 变量 ,不同 的 联机 客户 间 无 法 相互 存 取 。Application 对 象 变 
量 终止 于 IIS 服务 停止 ,但 是 Session 对 象 变量 终止 于 联机 机 器 离线 时 ,也 就 是 当 网 页 用 
户 关 掉 浏览 器 或 超过 设 定 Session 变量 对 象 的 有 效 时 间 时 ,Session 对 象 变 量 就 会 消失 。 
Session 对 象 属于 Page 对 象 的 成 员 , 可 以 直接 使 用 。 使 用 Session 对 象 存放 信息 的 语法 
如 下 : 


Session[ "变量 名 "] = "内 容 " 
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为 了 从 会 话 中 读 取 信息 ,可 以 使 用 以 下 语句 : 


VariableName = Session[ "变量 名 "]; 


【 例 6.23】 使 用 Session 对 象 记录 访问 页 面 的 次 数 。ex_6_23. aspx. cs 文件 代码 
如 下 : 


using System; 
using System. Data; 
using System. Collections; 
using System. Web; 
using System. Web. UI; 
public partial class ex 6 _23 : System. Web.UI.Page 
protected void Page Load(object sender, EventArgs e) 
{ ”Session.Timeout = 1;// 设 置 Session 对 象 的 有 效 期 .本 例 是 一 分 钟 ,在 一 分 钟 内 不 做 任何 操 
作 将 自动 销毁 
if (Session["count"] != null) 
{ Session["count"] = (int)Session["count"] +1; 
} 
else 
{ Session["count"] =1; 
} 
Response. Write(" 您 是 第 ”+ Session["count"].ToString() + "次 访问 本 站 "); 


以 间隔 不 超过 lmin 的 频率 不 停 刷新 ,访问 次 数 就 会 不 停 地 加 1 。 

在 应 用 程序 中 ,人 们 需要 在 跳 转 的 页 面 之 间 传 递 变量 。 例 如 采用 Session 对 象 记录 用 
户 登 录 的 信息 ,在 每 个 访问 页 面 中 检查 Session 对 象 变量 , 若 没 有 登录 信息 , 则 转向 登录 界 
面 。 采 用 Session 对 象 可 以 很 方便 地 实现 各 个 页 面 之 间 变 量 的 共享 ,但 Session 变量 的 使 用 
也 给 Web 服务 器 增加 了 不 少 负荷 ,因此 不 可 滥用 Session 对 象 。 应 注意 以 下 几 点 : 

(1) 不 要 在 Session 中 存放 大 的 数据 对 象 ,否则 每 次 读 写 时 服务 器 都 要 序列 化 ,会 大 大 
影响 系统 性 能 。 

(2) 当 不 需要 Session 时 ,应 尽快 用 Remove 将 它 从 服务 器 内 存 中 释放 ; 尽量 将 Session 
的 超时 时 间 设 短 一 点 。 超 时 的 含义 是 指 如 果 在 限定 的 时 间 内 没有 使 用 该 变量 , 则 大 于 设 定 
时 间 就 将 该 变量 从 内 存 中 释放 。 

6. Server 对 象 

Server 对 象 也 是 Page 对 象 的 成 员 之 一 ,主要 提供 一 些 处 理 网 页 请 求 时 所 需 的 功能 , 例 
如 获取 有 关 最 新 错误 的 信息 、 对 HTML 文本 进行 编码 和 解码 ,访问 和 读 写 服务 器 端 文件 
等 。Server 对 象 常用 方法 及 说 明 如 表 6-38 所 示 。 
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表 6-38 Server 对 象 常用 方法 及 说 明 
方 法 说 明 
对 要 在 浏览 器 中 显示 的 字符 串 进行 编码 。 例 如 : 


Response. Write("<b> hello</b>"); 


HtmlEncode 将 在 浏览 器 中 输出 "Hello" ,而 
Response. Write( Server.HtmlEncode("<b> hello</b>")); 
将 在 浏览 器 中 输出 "<b> hello</b>” 


HtmlDecode 对 已 被 编码 以 消除 无 效 HTML 字符 的 字符 串 进行 解码 
MapPath 返回 与 Web 服务 器 上 的 指定 虚拟 路 径 相对 应 的 物理 文件 路 径 


Une 编码 字符 串 。 在 使 用 网 址 进行 数据 传递 时 ,一些 特殊 符号 如 "@"、"&" 等 将 不 能 正常 
处 理 ,必须 经 过 编码 后 才 可 以 顺利 读 取 。 例 如 : 


Response. Redirect("a.aspx?email = " + Server. UrlEncode( "pp@qq. com")); 


在 a.aspx 的 后 台 代 码 中 可 正确 获取 email 的 值 : 
string email = Request["email"]; 
UrlDecode 对 字符 串 进 行 解码 


TransferCurl) 终止 当前 页 的 执行 ,用 URL 指定 的 路 径 执行 新 的 页 面 
Execute(url) 终止 当前 页 的 执行 ,用 URL 指定 的 路 径 执 行 新 的 页 面 ,执行 完 后 又 返回 当前 页 


用 Response. Redirect 和 Server. Transfer 都 能 重 定向 网 页 ,它们 的 用 法 是 有 区 别 的 。 
Response. Redirect 是 通过 浏览 器 执行 的 ,因此 在 服务 器 和 浏览 器 之 间 产 生 额 外 的 往返 过 
程 ,可 以 实现 将 页 面 重 定向 到 任何 其 他 页 面 ,包括 非 本 网 站 的 页 面 ,并 且 浏 览 器 网 址 会 变 成 
跳 转 后 的 页 面 地 址 ; 而 Server. Transfer 通过 更 改 服务 器 端 * 焦 点 ”和 传输 请 求 来 代替 告诉 
浏览 器 重 定向 ,这 就 意味 着 不 会 占用 较 多 的 HTTP 请 求 , 因 此 这 可 以 减轻 服务 器 的 压力 ,使 
服务 器 运行 更 快 。 它 只 能 在 本 网 站 内 切换 到 同 目录 或 者 子 目 录 下 的 网 页 ,用 户 浏 览 器 的 网 
址 没有 变化 , 即 隐藏 了 新 网 页 的 地 址 及 附带 在 地 址 后 边 的 参数 值 , 具 有 数据 保密 功能 。 

Server. Execute 方法 允许 当前 的 ASPX 页 面 执行 一 个 同一 Web 服务 器 上 的 指定 
ASPX 页 面 , 当 指定 的 ASPX 页 面 执行 完毕 ,控制 流程 重新 返回 原 页 面 后 继续 执行 。 这 种 页 
面 导航 方式 类 似 于 针对 ASPX 页 面 的 一 次 函数 调用 ,被 调用 的 页 面 能 够 访问 发 出 调用 页 面 
的 表单 数据 和 查询 字符 串 集合 ,所 以 要 把 被 调用 页 面 Page 指令 的 EnableViewStateMac 属 
性 设置 成 False。 

Server 对 象 的 常用 属性 及 说 明 如 表 6-39 所 示 。 

表 6-39 Server 对 象 常用 属性 及 说 明 


属 性 说 明 
MachineName 获取 服务 器 的 计算 机 名 称 
ScriptTimeout 获取 和 设置 请 求 超时 值 (以 秒 来 计算 ) 


【 例 6.24】 利用 Server 对 象 获得 服务 器 的 计算 机 名 称 和 服务 器 上 某 个 文件 的 物理 路 
径 。 其 ex_6_24. aspx. cs 文件 的 代码 如 下 : 
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using System; 
using System. Data; 
using System. Web; 
using System. Web. UI; 
public partial class ex 6 24: System.Web.UI.Page 
{ ”// 加 载 页 面 _Default.aspx 时 触发 事件 
protected void Page Load(object sender, EventArgs e) 
{ Response.Write(Server.MachineName); 
Response. Write("<p>"); 
Response. Write( Server. MapPath( "ObjectWeb. aspx" )); 


} 


7. Cookie 对 象 


Cookie 对 象 是 HttpCookieCollection 类 的 一 个 实例 。 它 用 于 保存 客户 端 浏览 器 请 求 的 
服务 器 页 面 ,也 可 以 用 它 存 放 非 敏感 性 的 用 户 信 息 ,信息 保存 的 时 间 可 以 根据 需要 设置 。 所 
有 信息 都 将 保存 在 客户 端 。 要 存储 一 个 Cookie 变量 ,可 以 通过 Response 对 象 的 Cookies 
集合 ,其 语法 如 下 : 


Response. Cookies[ Name]. Value = "内 容 "; 
而 要 取 回 Cookie, 则 要 使 用 Request 对 象 的 Cookies 集合 ,其 语法 如 下 : 
VariableName = Request. Cookies[ Name]. Value; 


Cookie 对 象 的 常用 属性 及 说 明 如 表 6-40 所 示 。 
表 6-40 ”Cookie 对 象 的 常用 属性 及 说 明 


序 号 属 性 说 明 
1 Expires 设 定 Cookie 变量 的 有 效 时 间 ,默认 为 1000min 
2 Name 获取 Cookie 变量 的 名 称 
1 Value 获取 或 设置 Cookie 变量 的 内 容 
4 Path 获取 或 设置 Cookie 使 用 的 URL 


【 例 6.25】 该 例 演 示 了 如 何 设置 一 个 Cookie, 如 何 得 到 设置 的 Cookie。ex_6_25. aspx 
页 面 代码 如 下 : 


<%@ Page Language = "C#" AutogventWireup = "true" CodeFile = "ex_6_25. aspx. cs”Inherits = 
"ex 6 25" %> 
< htm] >< head runat = "server"><title> 无 标题 页 </title></head> 
<body> 
< form id = "forml" runat = "server"> 
<asp:Button ID= "Buttonl" runat = "server" Text = "SetCookie" OnClick = "Buttonl_ 
Click" /> 
< asp:Button ID = "Button2" runat = "server" Text = "GetCookie" OnClick = "Button2_ 
Click" /> 
</form> 
</body> 
</HTML> 
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ex_6_25. aspx. cs 文件 代码 如 下 : 


using System; 

using System. Data; 

using System. Configuration; 
using System. Web; 


public partial class ex_6_25 : System. Web.UI.Page 
i 
protected void Button1_Click(object sender, EventArgs e) 
{ // 定 义 新 的 Cookie 对 象 , 其 名 称 为 LastVisit 
HttpCookie MyCookie = new HttpCookie("LastVisit" ) 7 
DateTime now = DateTime. Now; 


MyCookie. Value = now.ToString(); 
MyCookie. Expires = now. AddHours(1); // 设 置 失效 日 期 
Response. Cookies. Rdd(MYCookie) ; // 写 人 Cookie 


MyCookie. Values. Rdd("email"，"w@qq.com"); // 在 Cookie 中 添加 新 的 内 容 
Response. AppendCookie( MyCookie); 
} 
protected void Button2_Click(object sender, EventArgs e) 
{ // 获 取 Cookie 的 内 容 
string ss = Request. Cookies["LastVisit"]. Values. ToString(); 
Response. Write(Server. UrlDecode( ss)); 


6.4.2 Global.asax 文件 


在 VS 2010 中 添加 新 项 ,选择 “全 局 应 用 程序 类 ”后 将 在 应 用 程序 根 目 录 下 生成 一 个 
Global. asax 文件 。 它 实际 上 是 一 个 可 选 文件 。 删 除 它 不 会 出 问题 一 一 当然 是 在 你 没有 使 
用 它 的 情况 下 。Global. asax 文件 存放 Web 应 用 程序 的 应 用 级 事件 处 理 程 序 , 具 体 来 说 包 
括 以 下 事件 处 理 程序 。 

。Application_Init: 在 应 用 程序 被 实例 化 或 第 一 次 被 调用 时 ,该 事件 触发 。 

。 Application_Disposed: 在 应 用 程序 被 销毁 之 前 触发 。 这 是 清除 以 前 所 用 资源 的 理 

想 位 置 。 

。 Application_Error: 当 应 用 程序 中 遇 到 一 个 未 处 理 的 异常 时 ,该 事件 触发 。 

。 Application_Start: 在 应 用 程序 第 一 个 实例 被 创建 时 ,该 事件 触发 。 可 以 理解 为 网 
站 被 第 一 个 用 户 访问 时 触发 此 事件 ,以 后 将 不 会 再 触发 该 事件 。 

。 Application _End: 当 应 用 程序 的 最 后 一 个 实例 被 销毁 时 ,该 事件 触发 。 可 以 理解 为 
网 站 的 最 后 一 个 用 户 关闭 浏览 器 停止 访问 时 触发 此 事件 。 在 一 个 应 用 程序 的 生命 周 
期 内 它 只 触发 一 次 。 

。 Application_BeginRequest: 在 接收 到 一 个 应 用 程序 请 求 时 触发 。 对 于 一 个 请 求 来 
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说 , 它 是 第 一 个 触发 的 事件 ,请 求 一 般 是 用 户 输入 的 一 个 页 面 请 求 (URL)。 
。 Application_EndRequest: 针对 应 用 程序 请 求 的 最 后 一 个 事件 。 
。 Session_Start: 在 一 个 新 用 户 访问 应 用 程序 Web 站 点 时 ,该 事件 触发 。 
。 Session_End: 用 户 的 会 话 超 时 、 结 束 或 他 们 离开 应 用 程序 Web 站 点 时 ,该 事件 
触发 。 
【 例 6.26】 下 面 是 一 个 Global. asax 文件 的 例子 。 在 应 用 程序 启动 时 设置 一 个 计数 
器 ,每 当 有 一 个 用 户 访问 网 站 时 计数 器 加 1。 代 码 如 下 : 


< script runat = "server"> 

void Application_Start(object sender, EventArgs e) 

{ application["count"] = 0;// 设 置 初始 值 为 1 

| 

void Application End(object sender, EventArgs e) 

{ ”// 在 应 用 程序 关闭 时 运行 的 代码 

} 

void Application Error(object sender, EventArgs e) 

{ // 在 出 现 未 处 理 的 错误 时 运行 的 代码 

void Session Start(object sender, EventArgs e) 

{ Application. Lock; 

Application["count"] = (int)Application["count"] + 1;// 每 产生 一 个 访问 加 1 

Application. Unlock; } 

void Session End(object sender, EventArgs e) 

{ /在 会 话 结束 时 运行 的 代码 
// 注意 : 只 有 在 Web. config 文件 中 的 sessionstate 模式 设置 为 
// InProc 时 , 才 会 引发 Session_End 事件 . 如果 会 话 模式 设置 为 StateServer 
// 或 SQLServer, 则 不 会 引发 该 事件 


</script > 


6.5 ”ADO. NET 数据 库 访 问 技术 


ADO. NET 是 微软 在 . NET 平台 下 的 一 种 全 新 的 数据 库 访问 机 制 。 与 ADO 相 比 ， 
ADO. NET 满足 了 ADO 无 法 满足 的 3 个 重要 需求 : 为 适应 Web 环境 的 编程 需要 提供 断 开 
的 数据 访问 模型 ; 需要 提供 与 XML 的 紧密 集成 ; 需要 提供 与 . NET 框架 的 无 颖 连接。 在 
性 能 上 ,由 于 ADO 使 用 COM 来 处 理 记录 集 , 当 记录 集 内 的 值 转换 为 COM 可 识别 的 数据 
类 型 时 会 导致 显著 的 处 理 开销 ,而 ADO. NET 的 数据 集 不 需要 进行 数据 类 型 转换 ,其 性 能 
优 于 ADO 的 记录 集 。 在 应 用 程序 可 伸缩 性 上 ,由 于 ADO. NET 为 断 开 式 n 层 编程 环境 提 
供 了 很 好 的 支持 ,这 使 得 应 用 程序 的 可 伸缩 性 大 为 增强 。ADO. NET 中 有 两 个 核心 组 成 部 
分 ,分 别 是 . NET 框架 下 的 数据 提供 程序 Data Provider 和 数据 集 DataSet。 数 据 提供 程序 
包括 以 下 4 个 核心 对 象 。 

。 Connection : 建立 与 特定 数据 源 的 连接 。 

。 Command: 对 数据 源 执 行 数 据 库 命令 ,用 于 返回 和 修改 数据 .运行 存储 过 程 等 。 


334 
开发 技术 (第 2 版 ) 


。 DataReader: 从 数据 源 中 获取 高 性 能 的 数据 流 ,例如 只 进 且 只 读数 据 流 。 

。 DataAdapter: 用 数据 源 填充 DataSet, 并 可 处 理 数据 的 更 新 。 

DataSet 是 ADO. NET 的 断 开 式 结构 的 核心 组 件 。 设 计 DataSet 的 目的 是 为 了 实现 独 
立 于 任何 数据 源 的 数据 访问 。 因 此 , 它 可 以 用 于 多 种 不 同 的 数据 源 , 用 于 XML 数据 ,或 用 
于 管理 应 用 程序 本 地 数据 。DataSet 是 一 个 包含 一 个 或 多 个 DataTable 对 象 的 集合 ,这 些 对 
象 由 数据 行 和 数据 列 , 以 及 主键 、 外 键 、 约 束 和 有 关 DataTable 对 象 中 数据 关系 组 成 。 

ADO. NET 中 有 许多 对 象 与 ADO 中 的 对 象 功 能 相似 ,但 ADO. NET 中 的 对 象 功 能 更 
加 强大 。 同 时 ,除了 Connection、 Command 对象 外 ， 
ADO. NET 还 添加 了 许多 新 的 对 象 和 程序 化 接口 ,如 
DataSet、DataReader、DataView、DataAdapter 等 ,使 Connection 
得 对 数据 库 的 操作 更 加 简单 。 图 6-17 为 一 个 简化 的 
ADO. NET 对 象 模型 。 

ASP.NET 数据 库 应 用 程序 的 开发 流程 有 以 下 


几 个 步骤 ; DataAdapter 对 象 


(1) 利用 Connection 对 象 创建 数据 连接 。 | 

(2) 利用 Command 对 象 对 数据 源 执行 SQL 命 DataSet 对 象 DataReader 对 象 
令 并 返回 结果 。 

(3) 利用 DataReader 对 象 读 取 数据 源 的 数据 。 6-17 简化 的 ADO. NET 对 象 模型 

(4) DataSet 对 象 是 ADO. NET 的 核心 ,与 DataAdapter 对 象 配合 ,完成 数据 库 操作 的 
增加 、 删 除 、 修 改 、 更 新 等 操作 。 

在 ADO. NET 中 ,连接 数据 库 进 行 访问 通常 有 3 种 方式 : ODBC、OLEDB、SQLClient。 
其 中 ODBC 和 OLEDB 可 用 来 连接 各 种 数据 库 系 统 , 而 SQLClient 提供 专用 连接 方式 ,只 能 
用 来 连接 微软 SQL Server 7. 0 及 以 上 数据 库 。 在 应 用 程序 中 使 用 3 种 数据 连接 方式 之 一 
时 ,必须 在 后 台 代 码 中 引用 对 应 的 名 称 空间 ,对 象 的 名 称 也 随 之 发 生变 化 ,如 表 6-41 所 示 。 


表 6-41 数据 连接 方式 名 称 空间 及 对 应 的 对 象 名 称 


名 称 空间 对 应 的 对 象 名 称 
System. Data. Odbc OdbcConnection; OdbcCommand; OdbcDataReader; OdbcDataAdapter 
System. Data. OleDb OleDbConnection; OleDbCommand; OleDbDataReader; OleDbDataAdapter 


System. Data. SqlClient SqlConnection; SqlCommand; SqlDataReader; SqlDataAdapter 


虽 名 称 空 间 不 同 但 编程 方法 相同 。 下 面 仅 讨论 在 System. Data. SqlClient 名 称 空间 下 
数据 库 操作 对 象 的 使 用 。 


6.5.1 Connection 对 象 


数据 库 应 用 程序 与 数据 库 进 行 数据 交互 ,首先 必须 建立 与 数据 库 的 连接 。ADO. NET 
中 ,使 用 Connection 对 象 完成 此 项 功能 。 在 这 里 要 指出 的 是 在 创建 连接 之 前 要 在 程序 中 添 
加 System. Data 和 System. Data. SqlClient 两 个 命名 空间 。 建 立 与 数据 库 的 连接 是 通过 数 
据 库 连接 字符 串 来 实现 的 ,在 连接 字符 串 中 要 设置 一 些 参数 的 值 。 连 接 SQL Server 数据 库 
的 常用 参数 如 表 6-42 所 示 。 
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表 6-42 连接 SQL Server 数据 库 的 常用 参数 说 明 


参数 名 称 默 认 值 参数 说 明 

ConnectionTimeout 15 设置 SqlConnection 对 象 连接 数据 库 的 超时 时 间 ,单位 为 s, 若 超 
时 , 则 返回 连接 失败 

Datasource 无 要 连接 的 数据 库 服务 器 实例 名 称 

Server 无 要 连接 的 数据 库 服 务 器 名 称 

Addr 无 要 连接 的 数据 库 服务 器 名 称 的 地 址 

Network Address 无 要 连接 的 数据 库 服务 器 名 称 的 地 址 

Initial Catalog 无 设置 连接 数据 库 的 名 称 

Database 无 设置 连接 数据 库 的 名 称 

Integrated Security False 访问 数据 库 时 是 否 使 用 登录 Windows 操作 系统 的 用 户 名 和 
密码 

Trusted_Connection False 访问 数据 库 时 是 否 采用 针对 数据 库 设 置 的 用 户 和 密码 

Packet Size 设置 用 来 与 数据 库 通信 的 网 络 数 据 包 的 大 小 ,单位 为 byte, 有 效 
值 为 512 一 32767 

Password 无 设置 登录 数据 库 的 密码 

User ID 无 设置 登录 数据 库 的 用 户 账号 


Workstation ID 


计算 机 名 称 ， 设 置 连接 到 数据 库 服务 器 工作 站 的 名 称 


例如 ,下 面 的 连接 字符 串 用 来 打开 SQL Server 中 NorthWind 数据 库 : 


SqlConnection conn = new SqlConnection(); 
conn. ConnectionString = "Data Source = 127.0.0.1;Initial Catalog = Northwind; Persist Security 
Info = True;User ID = sa;Password = docman "; 


Connection 对 象 常用 的 方法 有 如 下 几 种 。 

。 BeginTransaction: 开始 记录 数据 库 事务 日 志 。 

。 ChangeDatabase(database): 将 目前 的 数据 库 更 改 为 参数 database 指定 的 数据 库 。 
。 Close: 关闭 数据 库 连接 ,数据 源 使 用 完毕 后 必须 关闭 数据 库 连 接 。 

。 CreateCommand: 创建 并 返回 与 Connection 对 象 有 关 的 Command 对 象 。 


。 Open: 打开 数据 库 连接 。 
常用 的 Connection 对 象 的 事件 主要 有 两 个 ,如 表 6-43 所 示 。 


表 6-43 ”Connection 对 象 的 事件 
事件 名 称 说 明 


数据 提供 程序 发 送 警 告 或 其 他 信息 时 触发 此 事件 。InfoMessage 事件 的 参数 为 
SqlInfoMessageEventArgs, 有 Errors、Messages 和 Source 共 3 个 属性 ,分 别 用 来 获取 
数据 源 传 出 的 警告 集合 、 由 数据 源 传 出 的 错误 全 文 以 及 发 生 错 误 的 对 象 名 称 

当 数 据 连 接 状 态 改变 时 触发 此 事件 。 此 事件 的 参数 为 StateChangeEventArgs, 它 有 
两 个 属性 : CurrentState 和 OriginalState。 前 者 获取 Connection 对 象 连接 的 新 状态 ， 
返回 1 表示 Open, 返 回 0 表示 Close。 后 者 获取 Connection 对 象 连接 的 原始 状态 , 返 
回 1 表示 Open, 返 回 0 表示 Close 


InfoMessage 


StateChange 
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下 面 通过 一 个 例子 来 讲述 应 用 程序 中 如 何 建立 与 数据 库 的 连接 以 及 打开 数据 库 的 
连接 。 

【 例 6.27】 Connection 对 象 的 使 用 。 在 VS 2010 中 添加 新 项 ex_6_27. aspx, 编 写 后 台 
代码 为 : 


using System; 

using System. Data; 

using System. Data. SqlClient; 
using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 


public partial class ex 6 27 : System. Web.UI.Page 
L 
protected void Page_Load(object sender, EventArgs e) 
{ 
SqlConnection conn = new SqlConnection(); // 新 建 一 个 Connection 对 象 
conn. ConnectionString = "Data Source = 127. 0. 0. 1; Initial Catalog = Northwind; 
Persist Security Info = True;User ID = sa;Password = docman";// 设 置 连接 
// 字 符 串 
// 引 发 StateChange 事件 
conn. StateChange + = new StateChangeEventHandler(conn StateChange); 
conn. Open( ); 
if (conn. State == ConnectionState, Open) 
{ // 判 断 当 前 Sqlconnection 对 象 的 状态 ,如 果 打 开 则 在 页 面 输出 1 
Response. Write("1"); 
conn. Close(); 
} 
if (conn. State == ConnectionState.Closed) 
{ Response.Write("0"); 


} 
} 
protected void conn_StateChange(object sender, StateChangeEventArgs e) 
{ // 事 件 处 理 程序 


Response. Write("StateChange from ”+ e.OriginalState + "to "十 
e. CurrentState+ "<br>"); 

| 
) 


6.5.2 Command 对 象 


ADO. NET 提供 了 两 个 使 用 连接 对 象 的 类 : 一 个 是 DataAdapter 类 ,DataAdapter 对 象 
可 以 用 来 填充 DataTabel 或 DataSet; 另 一 个 就 是 Command 类 ,Command 对 象 提 供 的 
Execute 方法 可 以 读 取 数 据 。Command 对 象 要 与 数据 库 连 接 方式 相 匹 配 ,相对 于 
SqlConnection 采用 的 就 是 SqlCommand。 常 用 的 创建 Command 对 象 的 语法 有 3 种 ,如 
表 6-44 所 示 。 


2. 使 用 一 个 参数 


3. 使 用 两 个 参数 
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表 6-44 常用 的 创建 Command 对 象 的 语法 
SqlCommand cmd = new SqlCommand(); 
cmd. Connection = conn; 
cmd. CommandText = strSQL; 
SqlCommand cmd = new SqglCommand(strSQL); 
cmd. Connection = conn; 


SqlCommand cmd = new SqglCommand(strSQL, conn); 


4. 使 用 Connection 对 象 的 CreateCommand SqlCommand cmd = conn. CreateCommand(); 


方法 


cmd. CommandText = strSQL; 


其 中 参数 strSQL 指定 要 执行 的 sql 命令 ,参数 conn 为 使 用 的 数据 连接 对 象 名 。 常 用 的 
Command 对 象 的 属性 如 表 6-45 所 示 。 


属性 名 称 


表 6-45 Command 对 象 的 常用 属性 
说 明 


CommandText 
CommandTimeout 


CommandType 


Parameters 


Connection 


获取 或 设置 要 对 数据 源 执行 的 sql 命令 、 存 储 过 程 或 者 数据 表 名 称 
获取 或 设置 Command 对 象 超时 时 间 ,单位 为 s, 默 认为 30。 如 果 Command 
对 象 在 30s 内 不 执行 CommandText 属性 设 定 的 内 容 便 返 回 失败 

获取 或 设置 CommandText 属性 代表 的 意义 ,可 以 为 CommandType 
. StoreProcedure( 存 储 过 程 ) .CommandType. Text 等 。 默 认为 Text 

获取 Parameter 对 象 的 集合 ParameterCollection 

获取 或 设置 Command 对 象 要 使 用 的 数据 连接 , 值 为 Connection 对 象 名 


常用 的 Command 对 象 的 方法 如 表 6-46 所 示 。 


表 6-46 常用 的 Command 对 象 的 方法 


方 法 说 明 

Cancel 取消 Command 对 象 的 执行 

CreateParameter 创建 一 个 Parameter 对 象 ,对 于 SqlCommand 对 象 创建 SqlParameter 对 象 ; 
对 于 OleDbCommand 对 象 创建 OleDbParameter 

ExecuteNonQuery 执行 CommandText 属性 指定 的 内 容 , 并 返回 被 影响 的 行 数 。 只 有 update、 
insert、delete 共 3 个 sql 语句 会 返回 被 影响 的 行 数 ,其 他 的 如 Create 返回 的 
都 是 一 1 

ExecuteReader 执行 CommandText 属性 指定 的 内 容 ,并 创建 DataReader 对 象 

ExecuteScalar 执行 CommandText 属性 指定 的 内 容 , 返 回 结 果 的 第 一 行 第 一 列 的 值 。 此 方 
法 只 用 于 执行 select 语句 

ExecuteXMLReader 如 果 Command 对 象 的 CommandType 属性 为 合法 的 包含 FOR XML 子 句 


的 SQL 语句 时 ,可 通过 此 方法 来 返回 一 个 XMLReader 对 象 


下 面 通过 例子 演示 通过 创建 Command 对 象 以 及 执行 Command 对 象 的 方法 来 对 数据 


库 数据 执行 操作 。 


【 例 6.28】〗 Command 对 象 的 使 用 。 在 VS 2010 中 添加 新 项 ex_6_28. aspx, 后 台 代 


码 为 : 
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using System; 
using System. Data; 
using System. Data. SqlClient; 
using System. Web; 
using System. Web. UI; 
public partial class ex 6 28 : System.Web.UI.Page 
' 
protected void Page Load(object sender, EventArgs e) 
{ string ConnectionString = "Data Source = 127. 0. 0. 1; Initial Catalog = Northwind; 
Persist Security Info = True;User ID = sa;Password = docman”; 
// 设 置 连接 字符 串 
SqlConnection conn = new SqlConnection(ConnectionString); 
conn. Open( ); // 连 接 数 据 库 
// 获 取 单 一 值 
GetSumofMoney( conn); 
// 获 取 多 行 数据 
ReadOrderDatal( conn); 
// 无 数据 返回 ,只 返回 被 影响 的 行 数 
UpdateCustomers(conn) 
conn. Close( ); // 断 开 数 据 库 连 接 
b 
protected void ReadOrderData( SqlConnection conn) 
{ 
string StrSQL = "SELECT OrderID, CustomerID FROM dbo.Orders;"; 
SqlCommand cmd = new SqlCommand(StrSQL，conn); // 创 建 Command 对 象 
SqlDataReader reader = cmd.ExecuteReader(); 
try { 
while (reader. Read()) 。 // 循 环 读 取 一 条 记录 ,从 首 记录 到 末 记 录 
{ Response. Write(reader[0]. ToString() + "," + reader[1].ToString() + "<br/>"); 
1 
} 
finally 
{ // Always call Close when done reading. 
reader. Close( ); 
} 
lb 
protected void GetSumofMoney(SqlConnection conn) 
{ 
string strSQL = "SELECT SUM(UnitPrice * Quantity) ”十 
"FROM Orders INNER JOIN [Order Details]" + 
"ON Orders. OrderID = [Order Details].OrderID" + 
" WHERE CustomerID = 'ALFKI'"; 
SqlCommand cmd = new SqlCommand(strSQL，conn); // 创 建 Command 对 象 
decimal decOrderTotal = (decimal)cmd. ExecuteScalar(); 
Response. Write( decOrderTotal. ToString() + "<p/>"); 


protected void UpdateCustomers(SqlConnection conn) 
{ string strSQL = "UPDATE Customers SET CompanyName = 'NewValue' " + "WHERE CustomerID = 
‘ALEKI"™; 
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SqlCommand cmd = new SqlCommand(strSQL, conn); // 创 建 Command 对 象 
int intRecordsAffected = cmd. ExecuteNonQuery(); 
if (intRecordsAffected == 1) 

Response. Write( "Update succeeded"); 


Response. Write( "Update failed" + "<p/>"); 


6.5.3 DataReader 对 象 


在 数据 库 访问 操作 中 ,可 通过 DataReader 对 象 和 DataSet 对 象 获取 访问 结果 。 
DataReader 对 象 用 来 从 数据 库 中 检索 只 读 、 只 进 的 数据 流 , 它 一 次 在 内 存 中 只 存储 一 行 记 
录 , 从 而 降低 了 系统 开销 ,而 DataSet 将 数据 一 次 性 加 载 在 内 存 中 , 读 取 完毕 后 即 可 断 开 数 
据 库 连接 。 虽 然 可 以 利用 DataSet 动态 地 添加 行 、 列 数据 ,并 且 可 以 对 数据 库 进 行 回 传 更 新 
操作 ,但 它 消耗 的 内 存 比较 大 ,如 果 此 时 大 量 用 户 同时 访问 数据 库 , 内 存 会 因 过 度 使 用 出 现 


无 法 预料 的 问题 。 


应 用 程序 可 在 下 列 情况 下 使 用 DataReader 对 象 : 不 需要 缓存 数据 ; 要 处 理 的 结果 集 太 
大 ,内 存 中 放 不 下 ; 一 旦 需要 以 只 进 、 只 读 方式 快速 访问 数据 。 注 意 : 不 能 用 DataReader 修 
改 数据 库 中 的 记录 , 它 是 采用 向 前 的 、 只 读 的 方式 读 取 数 据 库 的 。 

常用 的 DataReader 对 象 的 属性 如 表 6-47 所 示 。 


表 6-47 DataReader 对 象 的 常用 属性 


属 说 明 

FieldCount 表示 由 DataReader 得 到 的 一 行 数据 中 的 字段 数 
HasRows 表示 DataReader 是 否 包含 数据 

IsClosed 表示 DataReader 对 象 是 否 关闭 


DataReader 对 象 使 用 指针 的 方式 来 管理 所 连接 的 结果 集 ,常用 方法 如 表 6-48 所 示 。 


表 6-48 DataReader 对 象 的 常用 方法 
说 明 


Close 


bool Read() 


Close 方 法 不 带 参 数 ,无 返回 值 , 用 来 关闭 DataReader 对 象 。 由 于 
DataReader 在 执行 SQL 命令 时 一 直 要 保持 同 数 据 库 的 连接 ,所 以 在 
DataReader 对 象 开 启 的 状态 下 ,该 对 象 所 对 应 的 Connection 连接 对 象 不 能 
用 来 执行 其 他 操作 。 所 以 ,在 使 用 完 DataReader 对 象 后 ,要 使 用 Close 方 法 
关闭 该 对 象 ,否则 既 影响 数据 库 连接 的 效率 ,也 会 阻止 其 他 对 象 使 用 
Connection 连接 对 象 来 访问 数据 库 

让 记录 指针 指向 本 结果 集中 的 下 一 条 记录 ,返回 值 是 true 或 false。 当 
Command 的 ExecuteReader 方法 返回 DataReader 对 象 后 , 须 用 Read 方法 
来 获得 第 一 条 记录 ; 当 读 好 一 条 记录 想 获得 下 一 条 记录 时 ,可 用 Read 方 
法 。 如 果 当 前 记录 已 经 是 最 后 一 条 ,调用 Read 方法 将 返回 false。 也 就 是 
说 ,只 要 该 方法 返回 true, 则 可 以 访问 当前 记录 所 包含 的 字段 
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续 表 
方 法 说 明 
bool NextResult() 该 方法 会 让 记录 指针 指向 下 一 个 结果 集 。 当 调用 该 方法 获得 下 一 个 结果 集 


后 ,依然 要 用 Read 方法 来 开始 访问 该 结果 集 
Object GetValue(int ) 该 方法 根据 传人 的 列 的 索引 值 , 返 回 当前 记录 行 里 指定 列 的 值 。 由 于 事先 
无 法 预知 返回 列 的 数据 类 型 ,所 以 该 方法 使 用 Object 类 型 来 接收 返回 数据 
把 当前 记录 行 里 所 有 的 数据 保存 到 一 个 数组 里 并 返回 。 可 以 使 用 
FieldCount 属性 来 获知 记录 里 字段 的 总 数 , 据 此 定义 接收 返回 值 的 数组 


int GetValues 
(Object[ ] values) 


长 度 
GetString GetChar、 获得 指定 字段 的 值 ,这 些 方法 都 带 有 一 个 表示 列 案 引 的 参数 ,返回 均 是 
GetInt32 Object 类 型 。 用 户 可 以 根据 字段 的 类 型 ,通过 输入 列 索引 ,分 别 调用 上 述 方 


法 ,获得 指定 列 的 值 。 例 如 ,在 数据 库 里 ,id 的 列 索引 是 0, 通 过 string id 一 
GetString(0) ;代码 可 以 获得 id 的 值 

GetDataTypeName(int i) ”通过 输入 列 索引 ,GetDataTypeName 方法 返回 列 的 数据 类 型 

GetName(int i) 通过 输入 列 索引 ,GetName 方 法 获得 该 列 的 名 称 

IsDBNull(int i) 该 方法 用 来 判断 指定 索引 号 的 列 的 值 是 否 为 空 ,返回 true 或 false 


【 例 6.29】 通过 用 户 登录 的 例子 演示 DataReader 对 象 的 使 用 。 读 取 用 户 信息 表 , 通 
过 DataReader 逐条 将 表 中 的 记录 与 用 户 填写 的 登录 信息 (用 户 名 和 密码 ) 比 较 , 用 户 合法 则 
提示 登录 成 功 ,否则 提示 失败 。 


protected void Btn_confirm_Click(object sender，Eventargs e) // 按 钮 单 击 事件 
{ ”SqlConnection conn = new SqlConnection(); // 创 建 连接 对 象 
con. ConnectionString = "user id= sa;data source = 127.0.0.1;integrated security= 
false; initial catalog = BookShop;pwd= 123";// 设 置 连接 字符 串 
conn. Open( ); 
SqlCommand cmd = new SqlCommand(); 
cmd. Connection = conn; 
cmd. CommandText = "select * from userInfo"; 
SqlDataReader myreader = cmd.ExecuteReader(); 
string uName = this.txt_name.Text; // 得 到 用 户 输入 的 用 户 名 
string uPwd = this. txt_pwd.Text;  // 得 到 用 户 输 入 的 密码 
bool isTrue = false; 
while (myreader. Read( )) 
{ if (myreader["Name"].ToString() == uName && 
myreader[ "Password"]. ToString() == uPwd) 
{ 
isTrue = true; 
} 
} 


if (isTrue == true) 
Response. Write( "< script language = javascript > alert( ' 登 录 成 功 ! ') 
</script >"); 
else 
Response. Write("< script language = javascript > alert( ' 用 户 名 不 存在 或 密码 不 正确 !' 
)</script >"); 
conn. Close( );} 
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6.5.4 DataSet 对 象 与 DataAdapter 对 象 


DataSet 对 象 是 ADO. NET 中 最 核心 的 成 员 之 一 , 它 是 专门 用 来 处 理 从 数据 存储 中 读 
出 的 数据 ,并 以 离线 方式 存 于 本 地 内 存 中 。 不 管 数 据 源 是 什么 类 型 ,DataSet 都 使 用 相同 的 
方式 来 操作 从 数据 源 中 取得 的 数据 ,也 就 是 说 ,DataSet 提供 了 一 致 的 关系 编程 模型 。 应 用 
程序 主要 在 下 列 情况 下 需要 使 用 DataSet: 在 结果 的 多 个 离散 表 之 间 进 行 导 航 ; 操作 来 自 
多 个 数据 源 的 数据 (例如 ,来 自 多 个 数据 库 一 个 XML 文件 和 一 个 电子 表格 的 混合 数据 ); 
在 各 层 之 间 交 换 数据 或 使 用 XML Web 服务 ; 重用 同样 的 记录 行 ,以 便 通过 缓存 获得 性 能 
改善 (例如 排序 .搜索 或 筛选 数据 ) 。 
利用 DataSet 对 象 ,用 户 可 以 先 完成 数据 连接 和 通过 数据 适配器 DataAdapter 对 象 填 
充 DataSet 对 象 ,然后 客户 端 再 通过 读 取 DataSet 来 获得 需要 的 数据 ,同样 更 新 数据 库 中 数 
据 , 也 是 首先 更 新 DataSet, 然 后 再 通过 DataSet 来 更 新 数据 库 中 对 应 的 数据 。DataSet 主要 
有 如 下 3 个 特性 。 
(1) 独立 性 。DataSet 独立 于 各 种 数据 源 。 微 软 公司 在 推出 DataSet 时 就 考虑 到 各 种 数据 
源 的 多 样 性 .复杂 性 。 在 .NET 中 ,无 论 什么 类 型 数据 源 , 它 都 会 提供 一 致 的 关系 编程 模型 。 
(2) 离线 ( 断 开 ) 和 连接 。DataSet 既 可 以 以 离线 方式 ,又 可 以 以 实时 连接 来 操作 数据 库 
中 的 数据 。 这 一 点 有 点 像 ADO 中 的 RecordSet 。 
(3) DataSet 对 象 是 一 个 可 以 用 XML 形式 表示 的 数据 视图 ,是 一 种 数据 关系 视图 。 
DataAdapter 对 象 主要 用 来 承接 Connection 和 DataSet 对 象 。DataSet 对 象 只 关心 访 
问 操作 数据 ,而 不 关心 自身 包含 的 数据 信息 来 自 哪个 Connection 连接 到 的 数据 源 , 而 
Connection 对 象 只 负责 数据 库 连 接 不 关心 结果 集 的 表示 。 所 以 ,在 ASP. NET 的 架构 中 使 
用 DataAdapter 对 象 来 连接 Connection 和 DataSet 对 象 。 另 外 ,DataAdapter 对 象 能 根据 
数据 库 里 的 表 的 字段 结构 ,动态 地 构造 DataSet 对 象 的 数据 结构 。 
DataAdapter 对 象 的 工作 步骤 一 般 有 两 种 : 一 种 是 通过 Command 对 象 执行 SQL 语 
句 ,将 获得 的 结果 集 填充 到 DataSet 对 象 中 ; 另 一 种 是 将 DataSet 里 更 新 数据 的 结果 返回 到 
数据 库 中 。 使 用 DataAdapter 对 象 ,可 以 读 取 、 添 加 、 更 新 和 删除 数据 源 中 的 记录 。 对 于 每 
种 操作 的 执行 方式 ,适配器 支持 对 应 属性 ,类 型 都 是 Command, 分 别 用 来 管理 数据 操作 的 
“ 增 ?“ 删 >"“ 改 "“ 查 动作。 常见 的 DataAdapter 对 象 的 属性 如 表 6-49 所 示 。 
表 6-49 DataAdapter 对 象 常用 属性 
属 性 说 明 
AcceptChangesDuringFill ”获取 或 设置 将 DataRow 对 象 置 于 DataTable 对 象 时 , DataRow 对 象 是 否 调 
用 AcceptChanges 方法 ,默认 为 True 
ContinueUpdateOnError ”获取 或 设置 执行 Update 方法 更 新 数据 库 源 时 , 若 发 生 错 误 是 否 继 续 更 新 ， 
默认 为 False 
DeleteCommand 获取 或 设置 用 来 从 数据 源 删除 数据 行 的 SQL 命令 ,属性 值 必须 为 
Command 对 象 ,并 且 此 属性 只 有 调用 Update 方法 且 从 数据 源 删 除数 据 行 
时 使 用 ,其 主要 用 途 是 告知 DataAdapter 对 象 如 何 从 数据 源 删 除数 据 行 
InsertCommand 获取 或 设置 将 数据 行 插入 到 数据 源 的 SQL 命令 ,属性 值 为 Command 对 象 
SelectCommand 获取 或 设置 用 来 从 数据 源 选 取 数据 行 的 SQL 命令 ,属性 值 为 Command 对 
象 ,使 用 原则 与 DeleteCommand 属性 一 样 
UpdateCommand 获取 或 设置 用 来 更 新 数据 源 数据 行 的 SQL 命令 ,属性 值 为 Command 对 象 
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DataAdapter 对 象 常用 的 方法 如 表 6-50 所 示 。 


方 ”法 


表 6-50 ”DataAdapter 对 象 常用 的 方法 
说 明 


Fill (DataSet dataSet, 
string srcTable) 
Update(DataSet 
dataSet) 


根据 dataTable 名 填充 DataSet。dataSet, 需 要 更 新 的 DataSet; srcTable, 填充 
DataSet 的 dataTable 名 

当 程 序 调用 Update 方法 时 , DataAdapter 将 检查 参数 DataSet 每 一 行 的 
RowState 属性 ,根据 RowState 属性 来 检查 DataSet 里 的 每 行 是 否 改变 和 改变 的 
类 型 ,并 依次 执行 所 需 的 INSERT、UPDATE 或 DELETE 语句 ,将 改变 提交 到 
数据 库 中 。 这 个 方法 返回 影响 DataSet 的 行 数 。 更 准确 地 说 ,Update 方法 会 将 
更 改 解析 回 数据 源 , 但 自 上 次 填充 DataSet 以 来 ,其 他 客户 端 可 能 已 修改 了 数据 
源 中 的 数据 。 若 要 使 用 当前 数据 刷新 DataSet, 应 使 用 DataAdapter 和 Fill 方法 


DataAdapter 对 象 常 用 的 事件 如 表 6-51 所 示 。 


表 6-51 DataAdapter 对 象 常用 的 事件 


事 丁 说 明 
FillError 当 执行 DataAdapter 对 象 的 Fill 方法 发 生 错误 时 会 触发 此 事件 
RowUpdated 当 调用 Update 方法 并 执行 完 SQL 命令 时 会 触发 此 事件 
RowUpdating 当 调 用 Update 方法 且 在 开始 执行 SQL 命令 之 前 会 触发 此 事件 


DataSet 的 使 用 方法 一 般 有 3 种 : 

(1) 把 数据 库 中 的 数据 通过 DataAdapter 对 象 填充 DataSet 。 

(2) 通过 DataAdapter 对 象 操 作 DataSet 实现 更 新 数据 库 。 

(3) 把 XML 数据 流 或 文本 加 载 到 DataSet。 

DataSet 对 象 的 常用 属性 如 表 6-52 所 示 。 其 常用 方法 如 表 6-53 所 示 。 


表 6-52 ”DataSet 对 象 的 常用 属性 


属 性 描 述 
CaseSentive 指示 DataTable 中 的 字符 串 进行 比较 时 是 否 区 分 大 小 写 
DataSetName 返回 该 DataSet 的 名 称 
DefaultViewManager 返回 一 个 DataViewManager, 后 者 包括 DataSet 中 的 数据 组 成 的 定制 视 
EnforceConstraints 指出 更 新 数据 时 是 否 遵守 约束 规则 
ExtendedProperties 。 一 个 包含 自 定义 用 户 信息 的 PropertyCollection 对 象 
HasErrors 指出 该 DataSet 中 的 记录 是 否 有 错误 
Locate 用 于 比较 字符 串 的 区 域 信息 ,返回 一 个 CultureInfo 对 象 
Relations DataRelationCollection 对 象 ,表示 DataSet 的 表 之 间 的 所 有 关系 
Tables 一 个 代表 DataSet 中 所 有 表 的 DataTableCollection 对 象 
XML DataSet 中 数据 的 XML 格式 
XMLSchema 关于 DataSet 数据 的 XML 图 表 

表 6-53 DataSet 对 象 的 常用 方法 

方 法 描 述 

AcceptChange 提交 对 DataSet 所 做 的 所 有 修改 

BeginInit 在 运行 阶段 开始 初始 化 DataSet 

Clear 删除 DataSet 中 各 个 表 中 的 所 有 记录 
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续 表 
方 法 描 述 
Clone 生成 与 当前 DataSet 相同 但 不 包含 数据 的 DataSet 
Copy 生成 与 当前 DataSet 相同 且 包 含 数据 的 DataSet 
EndInit 在 运行 阶段 结束 DataSet 的 初始 化 
GetChanges 生成 一 个 包含 修改 过 的 数据 的 DataSet 
HasChange 返回 当前 DataSet 中 数据 是 否 已 修改 
InferXMLSchema 使 用 XML 数据 源 创建 数据 结构 
Merge 与 DataSet 指定 的 数据 集合 并 
ReadXMLSchema 依据 XML 图 表 创建 数据 结构 
RejectChange 撤销 对 DataSet 所 做 的 修改 
ResetRelations 将 Relations 属性 重 置 为 默认 值 
ResetTables 将 Tables 属性 重 置 为 默认 值 
WriteXML 将 DataSet 的 内 容 写成 XML 格式 
WriteXMLSchema 将 DataSet 的 数据 结构 写成 XML 模式 


DataSet 对 象 和 DataAdapter 对 象 的 区 别 和 联系 表现 在 : 

(1) DataAdapter 对 象 是 一 种 用 来 充当 DataSet 与 实际 数据 源 之 间 桥梁 的 对 象 ， 
ADO. NET 通 过 该 对 象 建立 并 初始 化 DataTable(DataSet 中 的 数据 表 ), 从 而 与 DataSet 结 
合 在 一 起 。DataSet 对 象 是 一 种 无 连接 的 对 象 , 它 与 数据 源 无 关 。 而 DataAdapter 则 正好 充 
当 DataSet 与 实际 数据 源 之 间 的 桥梁 ,可 以 用 来 向 DataSet 对 象 填充 数据 ,并 将 对 DataSet 
中 数据 的 修改 更 新 到 实际 的 数据 库 中 。DataAdapter 对 象 在 数据 库 操作 中 与 DataSet 配合 
使 用 ,可 以 执行 新 增 、 查 询 、 修 改 和 删除 等 多 种 操作 。 

(2) DataSet 虽然 拥有 类 似 于 数据 库 的 结构 ,但 并 不 等 同 于 数据 库 。 首 先 ,DataSet 不 仅 
可 以 存储 来 自 数据 库 中 的 数据 ,还 可 以 存储 其 他 类 型 的 数据 ,如 XML 格式 文档 ; 其 次 ， 
DataSet 与 数据 库 之 间 没 有 直接 的 联系 ,操作 DataSet 并 不 等 同 于 数据 库 中 的 数据 也 会 发 生 
改变 。 在 DataSet 上 执行 的 Update( 更 新 ) 或 Delete( 删 除 ) 等 操作 ,影响 的 仅仅 是 DataSet 
中 存储 的 数据 ,而 不 会 在 数据 库 中 执行 相同 的 操作 。DataSet 中 有 一 个 非常 重要 的 对 象 
DataTable 。 它 实际 上 是 DataSet 中 的 数据 表 , 包 含 了 DataSet 中 的 所 有 数据 。 在 DataTable 中 ， 
不 仅 包含 列 , 也 包含 表 的 关系 、 关 键 字 及 其 约束 等 信息 。 一 个 DataTable 表 是 数据 行 
(DataRow) 和 列 (DataColumn) 的 集合 。DataSet 对 象 的 模型 结构 如 图 6-18 所 示 。 


DataSet 


ExtendedProperties | | TablesCollection | |RelationCollection 


DataTable 
ParentRelations 
ChildRelations 
PrimaryKeys Rows 
Constraints = 
Columns ExtendedProperities 
DefaultView DataRows 
DataColumns 


图 6-18 ”DataSet 对象 的 模型 结构 
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【 例 6.30】 DataSet 对 象 与 DataAdapter 对 象 的 使 用 。 用 DataAdapter 实现 对 数据 集 
DataSet 的 填充 ,并 将 数据 集 作为 GridView 的 数据 源 来 显示 数据 信息 。 


protected void Page Load(object sender, EventArgs e) 
{ 证 (!this.IsPostBack) 
{ 
SqlConnection con = new SqlConnection(); 
conn. ConnectionString = "user id = sa; data source = 127. 0. 0. 1; integrated 
security= false; initial catalog = BookShop;pwd = 123";// 设 置 连接 字符 串 
conn. Open( ); 
SqlDataAdapter myda = new SqlDataAdapter("select * from BookInfo", conn); 
DataSet myset = new DataSet(); 
myda. Fill(myset); 
this. GridViewl. DataSource = myset; 
this. GridView1.DataBind( ); 


} 


【 例 6.31】 独立 使 用 DataSet。 创 建 一 个 DataSet 对 象 ,然后 在 其 中 创建 一 个 表 , 同 时 
添加 一 条 记录 ,并 显示 出 来 。 


protected void Page_Load(object sender, EventArgs e) 

{ 
DataSet ds = new DataSet(); 
DataTable dt = new DataTable(); 
dt. Columns. Add( "Id", System.Type.GetType("Systenm. Int32")); 
dt. Columns. Add( "Uname", System.Type.GetType("System.String")); 
dt. Columns. Add( "Pwd", System.Type.GetType("System. String")); 
dt.Columns["id"].AutoIncrement = true; 
ds. Tables. Add(dt); 
ds. Tables[0].PrimaryKey = new DataColumn[] { ds.Tables[0].Columns ["Id"] }; 
DataRow dr = dt.NewRow(); 
dr[l0] = "1°; 
dr[1] = "zhangsan"; 
dr[2] = "123456"; 
dt. Rows. Add(dr); 
this. GridViewl.DataSource = ds; 
this. GridViewl. DataBind( ); 

} 


DataSet 对 象 中 数据 的 定制 视图 由 DataView 对 象 控制 ,视图 代表 一 个 DataTable 的 数 
据 查 看 方式 。 在 通常 情况 下 ,默认 的 数据 查看 方式 是 按照 数据 库 数据 表 中 数据 的 排列 顺序 ， 
以 表格 形式 显示 。 对 于 用 户 而 言 ,常常 需要 利用 排序 .筛选 以 及 查询 等 属性 来 定义 不 同 的 数 
据 查看 方式 ,这 正 是 DataView 对 象 的 价值 所 在 。DataView 对 象 可 以 指定 筛选 条 件 来 选择 
查看 单个 数据 表 或 多 个 数据 表 中 的 部 分 数据 ,也 可 以 指定 与 默认 查看 方式 不 同 的 排序 方式 。 
DataView 对 象 的 常用 属性 和 方法 分 别 如 表 6-54 和 表 6-55 所 示 。 
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表 6-54 DataView 对 象 的 常用 属性 


属 性 描 述 
AllowDelete 设置 是 否 可 以 删除 视图 中 的 记录 
AllowEdit 设置 是 否 可 以 编辑 视图 
AllowNew 设置 是 否 可 以 在 视图 中 添加 记录 
ApplyDefaultSet 设置 是 否 使 用 默认 的 排序 方式 
Item(Index) 返回 视图 中 指定 的 记录 
RowFilter 设置 筛选 条 件 ,符合 条 件 的 记录 添加 到 DataView 中 
Sort 设置 或 获取 一 个 或 多 个 排序 的 字段 以 及 排序 顺序 
Table 从 中 取得 数据 的 源 DataTable 


表 6-55 DataView 对 象 的 常用 方法 


;3 描 述 
AddNew 在 视图 中 加 一 条 新 记录 
BeginInit 开始 初始 化 DataView 
Delete(index) 删除 由 index 所 指定 的 记录 
Dispose 释放 对 象 的 当前 实例 
EndInit 结束 初始 化 过 程 
Find 在 DataView 中 查找 指定 的 记录 


【 例 6.32】 DataView 对 象 的 使 用 。 


protected void Page Load(object sender, EventArgs e) 
{ 

SqlConnection conn = new SqlConnection("server = . ;database = BookShop; uid = sa;pwd 
= 

conn. Open( ) ; // 建 立 与 数据 库 的 连接 

SqlDataAdapter da = new SqlDataAdapter("select * from userInfo", conn); 

DataSet ds = new DataSet(); 

da.Fill(ds); 

DataView dviewl = new DataView(ds.Tables[0]); // 生 成 DataView 对 象 

dviewl. RowFilter = "Id>5";// 设 置 过 滤 条 件 

DataView dview2 = new DataView(ds.Tables[0]); 

dview2.Sort = "names";// 设 置 排序 字段 

this. GridViewl. DataSource = dviewl; 

this. GridView1.DataBind( ); 

this. GridView2. DataSource = dview2; 

this. GridView2. DataBind( ); 

// 分 别 绑 定 到 不 同 的 Gridview 控件 上 


6.5.5 执行 存储 过 程 


存储 过 程 是 保存 起 来 的 可 以 接受 和 返回 用 户 提供 的 参数 的 Transact-SQL 语句 的 集 
合 。 在 存储 过 程 中 可 以 使 用 数据 存 取 语句 流程 控制 语句 、 错 误 处 理 语句 等 。 其 主要 特点 是 
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执行 效率 高 ,可 以 重复 使 用 。 在 创建 存储 过 程 时 ,SQL Server 会 将 存储 过 程 编译 成 一 个 执 
行 计划 。 一 旦 创建 存储 过 程 ,很 多 需要 该 过 程 的 应 用 程序 都 可 以 调用 此 存储 过 程 ,减少 程序 
员 可 能 出 现 的 错误 。 

在 ADO. NET 应 用 程序 中 使 用 存储 过 程 的 一 般 步骤 是 : 中 创建 存储 过 程 ; 四 建立 与 相 
应 数据 库 的 连接 ; @ 指 定 存 储 过 程 名 称 ; @ 在 程序 中 说 明 执 行 的 类 型 是 存储 过 程 ; @ 若 要 
执行 的 存储 过 程 有 参数 则 完成 填充 Parameters 集合 ,否则 省 略 此 步 ; @ 执 行 存储 过 程 。 

上 述 过 程 中 的 第 @ 步 提 到 了 Parameters 集合 ,在 使 用 带 参 数 的 存储 过 程 时 它 经 常 被 用 
到 。Parameters 集合 是 一 个 Parameter 类 型 的 数组 ,用 于 给 存储 过 程 传递 参数 。 

Parameter 类 是 为 数据 源 控件 提供 绑 定 到 应 用 程序 变量 .用户 标识 和 选择 其 他 数据 的 一 个 
机 制 。Parameter 参数 除了 动态 提供 传 值 的 作用 外 ,最 重要 的 是 它 会 执行 以 下 工作 : 中 检查 参 
数 的 类 型 ; @ 检 查 参 数 的 长 度 ; @ 保 证 输入 的 参数 在 数据 库 中 会 被 当成 纯 文字 而 不 是 可 以 执 
行 的 SQL 命令 。 因 此 参数 进行 了 以 上 3 项 安全 性 检查 ,将 安全 性 强化 到 一 定 水 平 之 上 。 

与 System. Data. SqlClient 名 称 空间 相对 应 的 Parameter 对 象 是 SqlParameter 对 象 。 
其 属性 如 表 6-56 所 示 。 


表 6-56 ”SqlParameter 对 象 的 属性 


属性 名 称 数据 类 型 说 明 
DbType DbType 指定 该 参数 的 数据 库 数 据 类 型 
Direction ParameterDirection ”指定 该 参数 的 方向 : 1- 输 入 、2- 输 出 、3- 输 入 /输出 ,6- 参 数 将 包含 

存储 过 程 的 返回 值 

IsNullable Boolean 指示 该 参数 是 否 可 以 接受 Null 
ParameterName String 指定 参数 的 名 称 

Precision Byte 指定 参数 的 精度 

Scale Byte 指定 参数 的 位 数 

Size Int32 指定 参数 的 大 小 

SqlDbType SqlDbType 指定 该 参数 的 SQL 数据 类 型 
SqlValue Object 指定 使 用 SqlType 的 参数 的 值 
Value Object 指定 该 参数 的 值 


下 面 通过 两 个 例子 分 别 说 明 在 程序 中 如 何 使 用 带 参数 的 存储 过 程 和 不 带 参数 的 存储 过 
程 ,每 个 例子 分 别 使 用 Command 对 象 和 DataAdapter 对 象 来 实现 调用 。 
【 例 6.33】 在 应 用 程序 中 执行 不 带 参数 的 存储 过 程 。 


/* 在 SQL Server 中 建立 存储 过 程 p_Search* / 

create proc p_Search 

RS select names,author,publisher,price from book 
protected void Page_Load(object sender, EventArgs e) 


{ ExecutebyCmd(); //1. 通 过 Command 对 象 调用 存储 过 程 ; 
ExecutebyAdapter( ); //2. 通 过 DataAdapter 对 象 调用 存储 过 程 ; 
} 
private void ExecutebyCmd() // 通 过 Command 对 象 调用 存储 过 程 ; 


{ 
SqlConnection conn = new SqlConnection("server = . ;database = BookShop; uid= sa;pwd= 123"); 
conn. Open( ) ;// 建 立 与 数据 库 的 连接 
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SqlCommand cmd = new SqlCommand("p_Search", conn); // 调 用 存储 过 程 p_Search 
cmd. CommandType = CommandType. StoredProcedure; ”// 说 明 执 行 的 类 型 是 存储 过 程 
try 
{ ”cmd. ExecuteNonQuery( );// 执 行 存储 过 程 
Response. Write( "< script language = javascript > alert( ' 操 作成 功 ! ') </script >"); 

} 
catch 
{ Response.Write("< script language = javascript >alert(' 操 作 失 败 ') </script >"); 
} 

} 

private void ExecutebyAdapter( )// 通 过 DataAdapter 对 象 调用 存储 过 程 ; 

{ SqlConnection conn = new SqlConnection("server = . ;database = BookShop;uid= sa;pnd = 123"); 
conn. Open( ) ;// 建 立 与 数据 库 的 连接 
SqlDataAdapter da = new SqlDataAdapter(); 


da. SelectCommand = new SqlCommand("p_Search ", conn); // 调 用 存储 过 程 p_Search 
da. SelectCommand. CommandType = CommandType. StoredProcedure; // 说 明 类 型 是 存储 过 程 
try 

{ da.SelectCommand. ExecuteNonQuery(); // 执行 存储 过 程 


Response. Write("< script language = javascript > alert( ' 操 作成 功 ! ') </script >"); 
| 
catch 
{ Response.Write("< script language = javascript >alert( "操作 失败 ') </script >"); 
| 
} 


【 例 6.34】 使 用 带 参 数 的 存储 过 程 。 在 应 用 程序 中 由 用 户 在 页 面 上 输入 用 户 名 、 密 码 
和 邮件 地 址 , 当 单 击 “ 保 存 ” 按 钮 后 调用 存储 过 程 将 它们 保存 到 数据 表 中 。 


/* 在 SQL Server 中 建立 存储 过 程 insertuserInfox / 
create proc insertuserInfo 
@name varchar(30), @password varchar(50), @mail varchar(30) 
as insert into userinfo values( @name, @password, @mail) 
protected void Buttonl_Clickl (object sender, EventArgs e) 


{ ExecutebyCmd(); // 通 过 Command 对 象 调用 存储 过 程 ; 
ExecutebyAdapter( ); // 通 过 DataAdapter 对 象 调 用 存储 过 程 ; 
} 
private void ExecutebyCmd() // 通 过 Command 对 象 调用 存储 过 程 ; 
{ SqlConnection conn = new SqlConnection("server = .; database = BookShop; uid= sa;pwd = 123"); 
conn. Open( ); // 建 立 与 数据 库 的 连接 
SqlCommand cmd = new SqlCommand("insertuserinfo", conn); // 调 用 存储 过 


// 程 insertuserinfo 
cmd. CommandType = CommandTYpe. StoredProcedure;// 说 明 执行 的 类 型 是 存储 过 程 
// 建 立 参 数 对 象 的 数组 , 指定 每 个 参数 的 类 型 .长度 和 值 
SqlParameter[ ] parameters = 
{ new SqlParameter("@name", SqlDbType. VarChar,30), 
new SqlParameter("@password", SqlDbType. VarChar, 50), 


new SqlParameter("@mail", SqlDbType. VarChar, 30), 
}; 
parameters[0].Value = this.TextBox1.Text; 
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parameters[1].Value = this.TextBox2.Text; 
parameters[2].Value = this.TextBox3. Text; 
// 将 参数 对 象 传递 给 SqlCommand 对 象 
foreach (SqlParameter para in parameters) 
{ cmd.Parameters. Add(para); 
} 
try 
{ ”cmd. ExecuteNonQuery( );// 执 行 存储 过 程 
Response. Write( "< script language = javascript > alert( ' 操 作成 功 ! ') </script >"); 
| 
catch 
{ 
Response. Write( "< script language = javascript >alert( ' 操 作 失 败 ') </script >"); 
} 
private void ExecutebyAdapter()// 通 过 DataAdapter 对 象 调 用 存储 过 程 ; 
{ SqlConnection conn = new SqlConnection("server = . ;database = BookShop;uid = sa;pwd = 123"); 
conn, Open( ) ;// 建 立 与 数据 库 的 连接 
SqlDataAdapter da = new SqlDataAdapter(); 
da. InsertCommand = new SqlCommand("insertuserinfo", conn); // 调 用 存储 
// 过 程 insertuserinfo 
da. InsertCommand. CommandType = CommandType. StoredProcedure; // 说 明 类 
// 型 是 存储 过 程 
SqlParameter[ ] parameters = 
1 new SqlParameter("@name", SqlDbType. VarChar, 30), 
new SqlParameter("@password", SqlDbType. VarChar,50), 
new SqlParameter("(@mail", SqlDbType. VarChar, 30), 
};// 建 立 parameter 数组 
parameters[0].Value = this.TextBoxl.Text; 
parameters[1].Value = this.TextBox2.Text; 
parameters[2].Value = this.TextBox3.Text; 
foreach (SqlParameter para in parameters) // 传 递 参 数 
| da. InsertCommand. Parameters. Add( para); 
} 
try 
{ da.SelectCommand. ExecuteNonQuery(); // 执行 存储 过 程 
Response. Write( "< script language = javascript > alert( ' 操 作成 功 ! ') </script >"); 


} 


catch 
{ Response.Write("< script language = javascript >alert( ' 操 作 失 败 ') </script >"); 
} 


6.5.6 数据 库 事务 处 理 

数据 库 事务 处 理 是 把 一 组 数据 库 操作 合并 为 一 个 逻辑 上 的 工作 单元 。 在 系统 中 没有 出 
现 错误 的 情况 下 ,开发 人 员 可 以 使 用 事务 处 理 来 控制 并 保持 事务 处 理 中 每 一 个 动作 的 连续 
性 和 完整 性 。 使 用 这 样 的 方法 可 能 导致 向 两 个 极端 情况 发 展 : 要 么 在 事务 处 理 中 的 所 有 操 
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作 都 得 到 执行 ,要 么 没有 任何 操作 得 到 执行 。 这 样 的 方法 对 于 实时 应 用 程序 来 说 非常 必要 。 
事务 处 理 需要 一 个 数据 库 连 接 以 及 一 个 事务 处 理 对 象 。 

在 ADO.NET 中 ,可 以 使 用 Connection 和 Transaction 对 象 启动 .提交 和 回 滚 事务 。 
若 要 执行 事务 ,可 执行 下 列 操作 : 调用 Connection 对 象 的 BeginTransaction 方法 来 标记 事 
务 的 开始 。BeginTransaction 方法 返回 对 Transaction 的 引用 。 该 引用 将 分 配给 登记 在 事 
务 中 的 Command 对 象 。 将 Transaction 对 象 分 配给 要 执行 的 Command 的 Transaction 属 
性 。 如 果 通 过 活动 的 Transaction 对 象 对 Connection 执行 Command ,但 该 Transaction 对 
象 尚未 分 配给 Command 的 Transaction 属性 , 则 将 引发 异常 。 

与 System. Data. SqlClient 名 称 空间 相对 应 的 Transaction 对 象 是 SqlTransaction 对 
象 。 它 包括 了 两 个 属性 。 

。 Connection: 指示 同事 务 处 理 相 关联 的 SqlConnection 对 象 。 

。 IsolationLevel: 定义 事务 处 理 的 锁定 记录 的 级 别 。 属 性 IsolationLevel 是 包括 如 

表 6-57 所 示 成 员 的 枚 举 对 象 。 


表 6-57 IsolationLevel 枚 举 对 象 的 成 员 


成 员 名 称 说 明 
Chaos 从 高 度 独立 的 事务 处 理 中 出 现 的 pending changes 不 能 被 覆盖 
ReadCommitted 当 数 据 需 要 被 非 恶 意 读 取 时 ,采用 共享 锁定 (shared locks) ,但 数据 仍然 可 以 在 事 


务 处 理 结束 时 被 更 新 ,这 造成 了 非 重 复 性 的 数据 读 取 或 phantom data 的 产生 

ReadUncommitted 恶意 读 取 数 据 是 可 能 发 生 的 ,这 表示 没有 使 用 共享 锁定 ,并且 也 没有 实现 独占 锁 
定 (exclusive locks) 

RepeatableRead 锁定 查询 中 所 用 到 的 所 有 数据 ,由 此 避免 其 他 用 户 对 数据 进行 更 新 。 在 
phantom rows 仍然 可 用 的 状态 下 ,这 可 避免 非 重 复 性 的 数据 读 取 

Serializable 在 DataSet 中 进行 范围 锁定 ,由 此 防止 其 他 用 户 在 事务 处 理 结束 之 前 更 新 数据 
或 在 数据 库 中 插入 行 


SqlTransaction 对 象 包括 3 个 主要 方法 。 

(1) Commit: 提交 数据 库 事 务 。 

(2) Rollback: 从 未 决 状态 (pending state) 回 滚 (roll back) 事 务 处 理 。 事 务 处 理 一 旦 被 
提交 成 功 后 即 不 能 执行 此 操作 。 

(3) Save: 在 事务 处 理 中 通过 指定 savepoint 保存 点 名 称 创建 保存 点 ,以 便 对 事务 处 理 
的 一 部 分 进行 回 滚 。 

下 面 结合 例子 说 明 在 ADO. NET 中 是 如 何 完 成 事务 处 理 的 。 

【 例 6.35】 事务 处 理 的 例子 。 


protected void Button1_Click(object sender, EventArgs e) 
{SqlConnection conn = new SqlConnection("server = . ;database = BookShop; uid = sa;pwd = 123"); 
conn. Open( ); 
// 启 用 事务 
SqlTransaction tran = conn.BeginTransaction(); 
SqlCommand cmd = new SqlCommand(); 
cmd. Connection = conn; 
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cmd. Transaction = tran; 
try 
{ cmd.CommandText = "update userinfo set mail = 'zhangsan@126. com' where id= 2"; 
cmd. ExecuteNonQuery( ); 
cmd. CommandText = "update userinfo set mail = 'zhangsan@126.com' where id= 4"; 
cmd. ExecuteNonQuery( ); 
tran. Commit(); // 提 交 事 务 
Response. Write( "< script language = javascript>alert(' 事 务 提交 成 功 ! ') </script >"); 
} 
catch (Exception ex) 
{ ”tran. Rollback(); // 回 滚 事务 
Response.Write("< script language = javascript> 
alert( "失败 !'" + ex.ToString() +")</script >"); 


6.5.7 ” 跨 数 据 库 访 问 


这 里 只 给 出 针对 SQL Server 2000 的 处 理 方法 。 进 行 跨 库 查询 的 时 候 会 遇 到 两 种 情 
况 : 被 操作 的 多 个 数据 库 位 于 同一 台 物 理 机 器 上 ; 加 被 操作 的 多 个 数据 库 位 于 不 同 的 物 
理 机 器 上 。 下 面 分别 对 这 两 种 情况 进行 说 明 。 

1. 被 操作 的 多 个 数据 库 位 于 同一 台 物 理 机 器 上 

针对 这 种 情况 ,只 需要 在 构造 的 sql 语句 中 的 表 名 前 加 上 “数据 库 . dbo” 就 可 以 ,例如 
“select * from DBNamel. dbo. Tablel1”。 在 程序 中 建立 的 与 数据 库 的 连接 不 需要 改变 。 
下 面 给 出 一 个 在 应 用 程序 中 实现 对 多 个 库 进行 操作 的 示例 代码 。 

【 例 6.36】 同一 台 物 理 机 器 上 的 跨 数据 库 操作 。 其 中 ykdb 和 jht 为 两 个 不 同 的 数据 库 。 


using System; 

using System. Data; 

using System. Data. SqlClient; 
using System. Web; 

using System. Web. UI; 


public partial class Default2 : System. Web. UI.Page 
y 
protected void Page_Load(object sender, EventArgs e) 
{ SqlConnection conn = new SqlConnection("server = . ;database = ykdb; uid= ykdb;pwd = 123"); 
conn. Open( ) ;// 建 立 与 数据 库 的 连接 
SqlCommand cmd = new SqlCommand( ) ; 
cmd. CommandText = "select a.user name,b. realname from ykdb. dbo. user_name a, rjht. 
dbo. userinfo b"; 
cmd. Connection = conn; 
SqlDataReader reader = cmd.ExecuteReader(); 
try 
{ 
while (reader. Read( )) // 循 环 读 取 一 条 记录 ,从 首 记录 到 末 记 录 
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{ Response.Write(reader[0].ToString() + "," + reader[1]. ToString() + "<br/>"); 
| 

上 

finally 

{ reader.Close(); 

1 


} 


2. 被 操作 的 数据 库 位 于 不 同 的 物理 机 器 上 

针对 这 种 情况 ,需要 将 其 他 数据 库 所 在 的 机 器 连接 到 当前 主 操作 数据 库 服务 器 中 来 。 

具体 操作 过 程 为 : 首先 进入 主 操 作 数 据 库 服务 器 的 企业 管理 器 ,选中 左 侧 树 型 图 中 的 
“安全 (Security)”, 右 击 “ 链 接 服务 器 (Linked Severs)”, 选 中 “新 建 链接 服务 器 (New Linked 
Server…)” 后 弹出 新 建 链接 服务 器 窗口 ,选择 安全 性 选项 卡 ,选中 * 用 此 安全 上 下 文 进行 (Be 
made using this security context)” 选 项 ,并 填写 登录 名 和 密码 。 再 选择 常规 选项 卡 ,在 服务 
器 类 型 中 选中 sql server, 将 要 连接 的 服务 器 名 填 和 到 链接 服务 器 , 单 击 “确定 ?按钮 ,这 样 就 
完成 了 与 另外 一 台 物 理 机 器 的 链接 。 通 过 新 建 链接 服务 器 可 链接 多 台数 据 库 服务 器 到 主 操 
作 数 据 库 服务 器 上 来 。 接 下 来 要 做 的 工作 就 是 在 程序 中 通过 构造 sql 语句 实现 多 库 操作 功 
能 。 假 设 当 前 服务 器 名 为 MyCurrentServer, 数据 库 为 MyDb, 其 中 的 一 个 表 名 为 
MyCurrentTable, 链 接 的 数据 库 服务 器 名 为 MyLinkedServer, 数 据 库 名 为 MyLinkedDB， 
其 中 的 一 个 表 名 为 MyLinkedTable, 则 你 的 SQL 语句 可 以 这 样 写 : 


Select A. * ,B. * from MyCurrentTable A, MyLinkedServer.MyLinkedDB. dbo. MyLinkedTable B 


下 面 给 出 一 个 示例 进一步 加 以 说 明 。 
【 例 6.37】 不 同 物理 机 器 上 的 跨 库 操作 。tyd 为 男 一 台 服 务 器 名 ,此 处 可 为 IP 地 址 ， 
其 上 的 数据 库 名 为 news, 被 操作 的 表 为 newsType。 


protected void Page Load(object sender, EventArgs e) 
{ SqlConnection conn = new SqlConnection(" server = . ;database = BookShop; uid = sa;pwd = 
239 
conn. Open( ) ; // 建 立 与 数据 库 的 连接 
SqlCommand cmd = new SqlCommand( ) 
cmd. CommandText = "Select A. * ,B. * from book A,tyd.news.dbo.newsType B"; 
cmd. Connection = conn; 


6.5.8 数据 绑 定 技术 


数据 绑 定 技术 最 通常 的 应 用 是 把 Web 控件 中 用 于 显示 的 属性 跟 数据 源 绑 到 一 起 ,从 而 
在 Web 页 面 上 显示 数据 。 此 外 ,也 可 以 使 用 数据 绑 定 技术 设置 Web 控件 的 其 他 属性 。 
ASP.NET 的 数据 绑 定 技术 非常 灵活 ,数据 源 可 以 是 数据 库 中 的 数据 ,也 可 以 是 XML 文 
档 、 其 他 控件 的 信息 ,甚至 可 以 是 其 他 进程 的 信息 或 其 他 进程 的 运行 结果 。 
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因此 ,ASP.NET 控件 既 可 以 绑 定 到 简单 的 数据 源 , 如 变量 属性、 集合 以 及 表达 式 等 ， 
也 可 以 绑 定 到 复杂 的 数据 源 , 如 数据 集 .数据 视图 等 。 


ASP. NET 引入 了 新 的 数据 绑 定 方法 ,使 用 该 语法 可 以 轻松 地 将 Web 控件 的 属性 绑 定 
到 数据 源 。 请 法 如 下 : 


<%#DataSource %> 


其 中 DataSource 表示 各 种 数据 源 ,如 变量 、 属 性 、 列 表 、 表 达 式 以 及 数据 集 等 。 下 面 给 出 两 
个 数据 绑 定 的 例子 。 
【 例 6.38】 绑 定 到 简单 数据 源 。 


<% @ Page Language = "C#" RutoEventWireup = "true" CodeFile = "test. aspx. cs" Inherits = 
"test"” %> 
<! DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1, 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
<html xmlns = "http://www. w3.org/1999/xhtml" > 
< head runat = "server"> < title > 无 标题 页 </title> 
<! -- 此 段 代码 可 以 放 在 test.aspx.cs 中 ,在 这 里 这 种 写法 没有 使 用 代码 分 离 技 术 --> 

< script language = "c#" runat = "server"> 

int num = 65108995; 


string name = "张强 "; 

string email = "zhangqiang(@126. com"; 
void Page_Load(Object sender, EventArgs e) 
{ 


Page. DataBind( ); 
j 
</script> 
</head> 
<body> 
< form id = "forml" runat = "server"> 
<b> 姓 名 :<% #name%></b><br /> 
<b> 邮 箱 :<% #email %></b><br /> 
<b> 电 话 :<% # num.ToString() %></b> 
</form> 
</body > 
</html > 


其 运行 效果 如 图 6-19 所 示 。 


吉 无 标题 页 - Microsoft Internet Explorer 


FE -中 -四国 辣 | 罗拉 过 国 炒 头 严 罗 晶体 地 | 本 ” 
号 奸 (0) | 坊 ] http://iocalhost:4268jtest1jtest.aspx S| 已 甘 到 | 链接 | 
姓名 :张强 


邮箱 :zhangqiang8126. com 
电话 :65108995 


| 


1EE 厂矿 厂区 和 mene 


图 6-19 简单 数据 源 绑 定 
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【 例 6.39】 绑 定 到 复杂 数据 源 。 在 页 面 上 放 一 个 ListBox 控件 ,下 面 代码 实现 了 将 数 
据 表 中 的 数据 绑 定 到 该 ListBox 控件 。 


using System; 
using Systenm. Data; 
using System. Web; 
using System. Web. UI; 
using System. Data. SqlClient; 
public partial class test : System. Web. UI. Page 
protected void Page_Load(object sender, EventArgs e) 
{ SqlCconnection con = new SqlConnection("server = . ;database = BookShop; uid = sa;pwd = 123"); 
con. Open(); 
SqlCommand cmd = new SqlCommand("select name from userinfo", con); 
ListBox1.DataSource = cmd. ExecuteReader(); 
ListBoxl.DataTextField = "name"; 
ListBox1. DataValueField = "name"; 
ListBox1. DataBind( ); 
con. Close( ); 


6.5.9 LINQ 查询 技术 


LINQ(Language Integrated Query, 语 言 集成 查询 ) 提 供 了 一 种 跨 各 种 数据 源 和 数据 格 
式 使 用 数据 的 一 致 模型 。 在 LINQ 查询 中 ,始终 使 用 对 象 而 非 针对 某 种 具体 数据 源 的 操作 
命令 。 可 以 使 用 相同 的 基本 编码 模式 来 查询 和 转换 XML 文档 .SQL 数据 库 、.ADO. NET 
数据 集 、. NET 集合 中 的 数据 及 对 其 有 LINQ 提供 程序 可 用 的 任何 其 他 格式 的 数据 。 

LINQ 是 一 种 全 新 的 数据 查询 方式 。LINQ 的 查询 有 两 种 语法 : 一 种 是 方法 语法 , 即 传 
统 的 C# 类 和 方法 的 语法 进行 查询 ; 另外 一 种 请 法 是 查询 请 法 ,这 是 为 LINQ 而 引入 的 新 
的 C# 请 法 。 这 两 类 语法 形式 不 同 , 但 是 功能 相同 。 实 际 上 C# 在 遇 到 LINQ 的 查询 语法 
时 ,会 翻译 成 相应 的 方法 语法 再 执行 。 

1. 创建 查询 数据 源 

LINQ 可 用 于 从 各 种 数据 源 中 查询 数据 。 为 了 演示 LINQ 的 语法 和 功能 ,需要 创建 一 
组 不 同类 型 的 数据 ,以 这 些 数据 为 基础 进行 查询 。 本 节 将 使 用 一 组 随机 生成 的 商品 销售 数 
据 为 数据 源 演示 LINQ 的 使 用 。 与 此 相关 的 有 3 个 类 : 商品 类 别 Category、 商 品 信息 
Product 和 销售 记录 ProductSale。 为 了 随机 生成 数据 ,3 个 类 中 分 别 包含 一 个 随机 填充 数 
据 的 方法 。Category 类 的 代码 如 下 : 


public class Catagory 

{ 
public string id { get; set; } 
public string name { set; get; } 
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//<param name = "count"> 要 生成 商品 类 别 数量 </param> 
public static List < Catagory> randomCatagories( int count) 


{ 


Random r = new Random(DateTime. Now.Millisecond); 
List< Catagory> catagories = new List <Catagory>(); 
for (int i = 0; i< count; i++) 
{ 
Catagory category = new Catagory(); 
category. id = "C" + r.Next(1000); 
category. name = "C" + i.ToString(); 
catagories. Add( category); 
} 


return catagories; 


Product 类 的 代码 如 下 : 


public class Product 


{ 


public string id { get; set; } 
public string name { set; get; } 
public int storage { set; get; } 
public double price { set; get; } 
public Catagory category { get; set; } 
//< param name = "count"> 要 生成 商品 类 别 数量 </param> 
//< returns > 所 生成 的 商品 列表 </returns> 
public static List < Product > randomProducts( int count) 


{ 


Random r = new Random(DateTime. Now.Millisecond); 

List <Product > products = new List <Product>(); 

// 随 机 生成 类 别 , 设 类 别 数 量 为 商品 数量 的 1/10, 但 至 少 有 3 种 ,最 多 有 20 种 . 
int categoryCount = Math.Min(20, Math. Max(3, count / 10)); 

Catagory[ ] categories = Catagory. randomCatagories(categoryCount).ToArray 
for (int i = 0; i< count; i++) 


{ 
Product p = new Product(); 
p.id = "P" + r.Next(1000).ToString ("0000"); 
p.name = "Product" + i.ToString(); 
p. storage = r.Next(10, 1000); 
p.price = 1 + r.NextDouble() * 300; 
p. category = categories[r. Next(categoryCount)]; 
products. Add(p); 
} 


return products; 


ProductSale 类 的 代码 如 下 : 
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public class ProductSale 
{ 
public Product product { get; set; } 
public DateTime date { set; get; } 
public int quantity { set; get; } 
//<param name = "count"> 要 生成 的 销售 记录 的 数量 </param> 
//< returns > 所 生成 销售 数据 列表 </returns> 
public static List <ProductSale> randomSales( int count) 
{ 
// 随 机 生成 商品 列表 , 设 商 品种 类 为 销售 记录 的 1/5. 
int productCount = count /5 + 1; 
Product[ ] products = Product. randomProducts(productCount).ToArray (); 
Random r = new Random(DateTime. Now.Millisecond); 
List <ProductSale> sales = new List<ProductSale>(); 
for (int i = 0; i< count; i++) 
{ 
ProductSale sale = new ProductSale(); 
sale. product = products[r.Next(productCount)]; 
sale. date = DateTime. Now. AddDays(r. Next( — 30, 30)); 
sale. quantity = r.Next(100); 
sales. Add( sale); 
} 


return sales; 


2. 投 影 

在 数据 查询 中 ,投影 是 指 从 一 个 数据 源 中 查询 某 些 字段 或 属性 ,例如 SQL 语句 中 的 
“select 列 名 1, 列 名 2,…, 列 名 N from 表 名 ”就 是 一 个 投影 操作 。 在 LINQ 中 ， 
IEnumberable 二 T 志 类 的 Select 扩展 方法 可 以 实现 投影 操作 ,方法 声明 如 下 : 


// 摘 要 :将 序列 中 的 每 个 元 素 投影 到 新 表 中 

// 参 数 : 

//source: 一 个 值 序列 ,要 对 该 序列 调用 转换 函数 

//selector: 应 用 于 每 个 元 素 的 转换 函数 

// 类 型 参数 : 

//TSource: source 中 的 元 素 的 类 型 

//TResult: selector 返回 的 值 的 类 型 

// 返 回 结果 : 一 个 System. Collections. Generic. IEnumberable<T>, 其 元 素 为 对 source 的 每 个 元 素 
调用 转换 函数 的 结果 

// 异 常 : System. ArgumentNullException: source 或 selector 为 null 

public static IEnumberable < TResult > Select < TSource, TResult >(this IEnumberable < TSource > 
source, Func < TSource, TResult > selector); 


Select 方法 用 于 从 集合 中 查询 数据 ,查询 后 数据 并 不 一 定 与 集合 中 原 有 数据 类 型 相同 ， 
而 是 可 以 基于 原 有 数据 创建 任意 的 数据 类 型 。 例 如 可 以 从 一 个 学 生 信息 集合 中 查询 所 有 的 
学 号 。Select 方法 参数 中 的 Func 一 TSource,TResult 二 实现 了 这 个 类 型 转换 的 功能 ,通常 
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为 这 个 参数 传递 一 个 Lambda 表达 式 。 
【 例 6.40】 Select 查询 。 本 例 演示 如 何 使 用 IEnumberable 二 T 放 类 的 Select 扩展 方法 
查询 商品 信息 。 


public static void selectDemo( ) 

List< Product > products = Product.randomProducts(5); 

Var query = products.Select(p => p); 

foreach (var itenm in query) 

1 
Console. WriteLine("Id= {0}, Name = {1},Price= {2}, storage{3}, category = {4}", item. id，item. 
name, item.price, item. storage, item.category.name); 

} 
// 查 询 商 品 的 一 部 分 信息 ,这 些 信息 构成 一 个 匿名 类 型 

var query2 = products. Select(p => new { Id = p. id, Name = Pp. name, Category = Pp. 
category. name }); 


foreach (var item in query2) { 
Console. WriteLine("Id= {0},Name = {1},category = {2}", item. Id, item. Name, item.Category); 
} 


如 前 所 述 ,LINQ 有 两 种 语法 : 方法 语法 和 查询 语法 。LINQ 的 查询 语法 如 下 : 
from 变量 名 in 数据 源 ”select 表达 式 


【 例 6.41】 与 例 6. 40 所 使 用 扩展 方法 语法 对 应 的 等 价 查询 语法 。 示 例 代码 如 下 : 


public static void selectDemo( ) 
| 
List< Product > products = Product.randomProducts(5); 
Var query = fromp in products 
select p; 
foreach (var item in query) 
Ud 
Console. WriteLine(" Id = {0}, Name = {1}, Price = {2}, storage{3}, category = {4}", itenm. 
id, item. name, item. price, item. storage, item.category. name); 
} 
Var query2 = fromp in products 
select new { Id = p.id, Name = p.name, Category = p.category.nanme }; 
foreach (var item in query2) 
{ 
Console. WriteLine ("Id = {0}, Name = {1}, category = {2}", item. Id, item. Name, itenm. 
Category); 
} 
) 


3. 选择 
数据 查询 中 的 选择 是 指 从 数据 源 中 查找 符合 条 件 的 数据 ,过 滤 掉 不 符合 条 件 的 数据 。 
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SQL 语言 中 Select 语句 后 面 的 Where 条 件 所 起 的 作用 就 是 选择 。 在 LINQ 中 
T 二 类 的 Where 扩展 方法 可 以 实现 数据 过 滤 功 能 。 与 Where 扩展 方法 对 
应 的 查询 语法 为 : 


IEnumberable 一 


fron 变量 名 ”in 数据 源 where 条 件 select 表达 式 


【 例 6.42】 Where 过 滤 数 据 。 本 例 演示 使 用 Where 方法 查询 价格 大 于 180 元 的 商品 信息 。 


public static void whereDemo( ) 
{ 
List< Product > products = Product. randomProducts(10); 
Var query = from p in products 
Where p. price > 180 
select p; 
foreach (var item in query) 
{ 
Console. WriteLine("Id= {0}, Name = {1},Price= {2}", item. id, item. name, item. price); 
b 
var query2 = fromp in products 
where p. price > 180 
select new { Id = p.id, Name = p.name, Category = p.category. name }; 
foreach (var item in query2) 
{ 
Console. WriteLine ( " Id = {0}, Name = {1}, category = {2}", item. Id, item. Name, itenm. 
Category); 
由 


上 述 代码 运行 结果 如 图 6-20 所 示 。 


PB115.Nane=Product3,Price=292.686874614999 
P8658,.Nane=Product5, Price=251 .111771025 
0236 .Nam uct9 -Pr 299 -14872B617475 


PO115 .Nam 
8650, Na 
P8236 ,Nam 


图 6-20 Where 语 句 的 使 用 


4. 排序 

为 了 实现 数据 排序 ,IEnumberable 二 TT 二 类 包含 4 个 扩展 方法 ,分 别 为 OrderBy、 
OrderByDescending、ThenBy、ThenByDescending。 其 中 OrderBy 方法 的 功能 是 将 数据 源 
按照 一 个 表达 式 升序 排序 。ThenBy 方法 的 作用 是 对 一 个 已 经 按照 某 个 表达 式 排序 的 集合 
再 按照 另 一 个 表达 式 进行 排序 ,ThenByDescending 方法 的 功能 与 之 相似 ,只 是 按照 降序 排 
序 。 与 OrderBy 等 4 个 排序 方法 相对 应 的 查询 语法 如 下 : 


Fronm 变量 名 in 数据 源 

Where 条 件 

Orderby 表达 式 1 [descending] ,表达 式 2, … ,表达 式 n 
Select 表达 式 
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【 例 6.43】 数据 排序 。 
本 例 演 示 如 何 按照 单个 关键 字 和 按照 多 个 关键 字 对 商品 进行 排序 。 


public static void sortDemo() { 
List< Product > products = Product.randomProducts(10); 
Var query = fromp in products 
orderby p. price 
where p. price > 180 
select p; 
foreach (var itenm in query) 
由 
Console. WriteLine("Id= {0},Name = {1},Price= {2}"， 让 em. id, item. name, item.price); 
} 
Var query2 = from p in products 
where p.price< 100 
orderby p. category .id,p.price descending 


select p; 
foreach (var item in query2) 
{ 
Console. WriteLine("Id= {0},Name = {1},Price= {2}", itenm. id, item. name, item. price); 
1! 
} 
5. 数据 分 组 


当 进行 数据 查询 时 ,很 多 时 候 还 需要 进行 数据 分 组 , IEnumberable 二 T 二 类 使 用 
GroupBy 方法 来 实现 数据 的 分 组 。 

【 例 6.44】 分 组 查询 。 

本 例 演示 分 组 查找 功能 ,将 所 有 商品 按照 类 别 ID 进行 分 组 ,并 输出 各 组 的 键 值 (类 别 
ID) 和 各 组 中 的 商品 列表 。 


public static void groupDemo( ) 
{ 
List <Product > products = Product. randomProducts(6); 
Var query = from p in products 
group p by p. category . id 
into categoryGroup 
select new { categoryid = categoryGroup. Key , products = categoryGroup}; 
Tt i 
foreach (var group in query) 
{ 
Console. WriteLine(" ========= 第 {0} 组 (类 别 id: {1}) ========",i++, group . 
categoryid ); 
foreach (var item in group. products ) { 
Console. WriteLine("Id= {0}, Name = {1},Price= {2}", item . id, item .name , item .price ); 
. 
} 
} 
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上 述 代码 输出 结果 如 图 6-21 所 示 。 


6-21 分 组 查询 


6.6 用 VS 2010 创建 和 访问 Web 服务 实例 


一 个 Web 服务 (Web Service) 就 是 一 个 应 用 Web 协议 的 可 编程 的 应 用 程序 逻辑 。 从 
表面 上 看 ,Web 服务 就 是 一 个 应 用 程序 , 它 向 外 界 提供 了 一 个 可 以 通过 Web 进行 调用 的 
API, 也 就 是 说 可 以 用 编程 的 方法 通过 Web 来 调用 这 个 程序 。Web 服务 平台 是 一 套 标准 ， 
它 定 义 了 应 用 程序 如 何在 Web 上 实现 互 操作 。 可 以 用 任何 语言 在 任何 平台 上 写 Web 服 
务 , 只 要 通过 Web 服务 标准 对 这 些 服务 进行 查询 和 访问 就 行 。 可 将 Web 服务 看 作 是 Web 上 
的 组 件 编程 。 为 了 实现 这 样 的 目标 ,Web 服务 使 用 了 两 种 技术 一 一 XML 技术 和 SOAP 协议 。 

(1) XML 技术 : XML 是 在 Web 上 传送 结构 化 数据 的 有 效 方式 , Web 服务 要 以 一 种 可 
靠 的 自动 的 方式 操作 数据 ,XML 可 以 使 Web 服务 方便 地 处 理 数据 ,十 分 理想 地 实现 数据 与 
表示 的 分 离 。 

(2) SOAP 协议 (Simple Object Access Protocol) : SOAP 是 服务 使 用 者 向 Web 服务 发 
送 请 求 并 接收 应 答 的 协议 。SOAP 是 基于 XML 和 XSD 的 ,XML 是 SOAP 的 数据 编码 方式 。 

对 Web 服务 进行 简单 介绍 后 ,下 面 我 们 开始 学 习 在 VS 2010 中 如 何 创建 Web 服务 。 

【 例 6.45】 单独 创建 一 个 Web 服务 , 放 在 网 上 被 其 他 应 用 系统 共享 使 用 。 

(1) 首先 进入 VS 2010, 选 择 新 建 网 站 。 在 项 目 类 型 中 选择 Visual C# 项 目 ( 选 择 
.NET Framework 4.0 以 下 框架 ) ,在 模板 中 选择 ASP. NET Web 服务 ,在 项 目 位 置 中 选择 
文件 系统 ,存放 位 置 为 D:\ Webservice。 单 击 “ 确 定 ” 按 钮 后 VS 2010 就 自动 创建 了 . NET 
Web 服务 框架 。 在 “解决 方案 资源 管理 器 ”中 生成 了 两 个 文件 Service. asmx 和 App_Code 
目录 下 的 Service. cs。 

(2) 可 以 看 到 在 Service. cs 代码 视图 里 已 经 存在 一 个 名 为 Hello World 的 Web 服务 ， 
这 是 VS 2010 提供 的 一 个 示例 Web 服务 方法 ,返回 字符 串 “Hello World”。 在 每 一 个 Web 
服务 的 方法 前 加 上 “WebMethod” 就 可 以 按 自己 的 要 求 建立 多 个 Web 服务 方法 了 。 我 们 在 
上 述 基 础 上 建立 两 个 名 为 Max 和 getmyTable 的 Web 服务 方法 ,其 完整 代码 如 下 : 


using System; 

using System. Web; 

using System. Web. Services; 

using System. Web. Services. Protocols; 

using System. Data; 

using System. Data. SqlClient; ”// 由 于 getmyTable 方 法 连接 数据 库 ,必须 加 上 此 名 称 空间 
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[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfilel 1)] 
public class Service : System. Web. Services. WebService 


public Service() 
{ ”// 如 果 使 用 设计 的 组 件 ,请 取消 注释 以 下 行 
//InitializeComponent(); 
上 
[WebMethod] 
public string HelloWorld() 
{ return "Hello World"; 
[WebMethod(Description = "在 输入 的 3 个 数 中 返回 最 大 的 一 个 ")] 
public int Max(int a, int b, int c) 
{ int max; 
if (a> b) 
max = a; 
else 
max = b; 
if (c > max) 
return c; 
else 
return max; 
} 
[WebMethod(Description = "从 数据 表 中 读 取 数据 ,以 表格 方式 显示 出 来 ."，EnableSession = 
false)] 


public string getmyTable( string ConnectionString, string SelectSQL) 
{ 


String rsString; 
SqlConnection conn = new SqlConnection(ConnectionString); 
SqlDataAdapter da = new SqlDataAdapter(SelectSQL, conn); 
DataSet ds = new DataSet(); 
da.Fill(ds, "myTable"); 
DataTable tbl = ds.Tables["myTable"]; 
@"< table border = '0'bgcolor = 'blue'cellpadding = '1'cellspacing = 'L><tr 


for (int i = 0; i<= ds.Tables["myTable"].Columns.Count — 1; i++) 
{ rsString + = "<td>" + ds.Tables["myTable"].Columns[i].ColumnName + "</td>"; 
} 
rsString + = "</tr>"; 
for (int i = 0; i< tbl.Rows.Count; i++) 
{ rsString + = "<tr bgcolor=\"white\">"; 
for (int j = 0; j<= ds.Tables["myTable"].Columns.Count — 1; j++) 
{ rsString + = "<td>" + tbl.Rows[i][j] + "</td>"; 
} 
rsString + = "</tr>"; 
} 
rsString + = "</table>"; 
return rsString; 


WebMethod 中 的 Description 是 对 该 Web 方法 的 一 种 描述 ,用 来 解释 和 说 明 该 Web 
方法 。 此 Web 服务 使 用 http://tempuri. org/ 作 为 默认 命名 空间 。 在 公开 此 XML Web 
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Service 之 前 ,应 更 改 默认 命名 空间 。 每 个 Web 服务 都 需要 一 个 唯一 的 命名 空间 ,以 便 客户 
端 应 用 程序 能 够 将 它 与 Web 上 的 其 他 服务 区 分 开 。http://tempuri. org/ 可 用 于 处 于 开发 
阶段 的 Web 服务 ,而 已 发 布 的 Web 服务 应 使 用 更 为 永久 的 命名 空间 。 可 使 用 公司 的 
Internet 域名 作为 命名 空间 的 一 部 分 ,它们 不 必 指 向 Web 上 的 实际 资源 。 

(3) 将 Service. asmx 设 为 起 始 页 , 按 下 F5 运行 此 Web 服务 ,运行 结果 如 图 6-22 所 示 。 
运行 结果 中 显示 出 了 编写 的 3 个 Web 服务 方法 。 单 击 “ 服 务 说 明 ” 超 链接 ,可 显示 该 Web 
服务 的 WSDL 说 明 。WSDL(Web Services Description Language, Web 服务 描述 语言 ) 用 
于 描述 服务 端 所 提供 服务 的 XML 格式 。WSDL 文件 里 描述 了 服务 端 提供 的 服务 、 提 供 的 
调用 方法 以 及 调用 时 所 要 遵循 的 格式 ,比如 调用 参数 和 返回 值 的 格式 ,等 等 。WSDL 很 像 
COM 编程 里 的 IDL(Interface Description Language, 接 口 描述 语言 ) ,是 服务 器 与 客户 端 之 
间 的 契约 ,双方 必须 按 契 约 严格 行事 才能 实现 功能 。 它 在 创建 Web 服务 时 自动 生成 。 


避 service web 服务 - Microsoft Internet Explorer 口 | x| 


| 文件 中 六 加 (查看 W) “收藏 (和 工具 (D 帮助 


支持 下 列 换 作 。 有 关 正式 定义 ， 请 查看 服务 说 明 , 


e Helloworld 


。 Max 
在 输入 的 3 个 数 中 返回 最 大 的 一 个 


eqetmyTable 
从 数据 表 中 读 职 数据 ， 以 表格 方式 显示 出 来 。 


画 me 
图 6-22 Web 方 法 的 测试 页 面 


(4) 下 面 就 可 以 来 测试 所 构建 的 Web 服务 方法 的 正确 与 否 。 单 击 Max 后 ,分 别 输入 
3、9、6, 单 击 “ 调 用 ”后 ,在 弹出 的 新 窗口 中 以 XML 文件 格式 显示 最 大 值 结果 9 : 


<?xml version= "1.0" encoding= "utf - 8" ?> 
< int xmlns = "http://tempuri. org/">9 </int> 


若 单 击 getmyTable 方法 , 则 出 现 如 图 6-23 所 示 界 面 。 

输入 连接 数据 库 的 字符 串 "server 二 localhost; database 一 northwind; uid 一 sa; pwd 一 
123;" 和 SQL 查询 语句 "select * from employees" 后 , 单 击 “调用 ”, 如 一 切 正常 将 以 XML 
文件 格式 显示 执行 结果 。 实 际 上 这 里 用 getmyTable 建立 了 一 个 通用 方法 ,可 连接 不 同 的 
数据 库 ,显示 其 中 任 一 个 表 的 数据 。 

(5) 根据 实际 情况 可 对 Web. config 文件 进行 配置 。 该 Web 服务 建 好 后 ,在 VS 2010 
中 分 别 单 击 主 菜单 中 的 “生成 网 站 ”和 “发 布 网 站 ”, 在 默认 设置 情况 下 ,编译 后 生成 的 Web 
服务 程序 位 于 d:\My Documents\ Visual Studio 2010\ Projects\ WebService\ Precompiled 
Web\WebService 文件 夹 中 。 

(6) 需要 将 生成 的 Web 服务 部 署 在 网 络 上 的 另 一 台 Web 服务 器 上 。 在 该 计算 机 上 ， 
新 建 一 个 文件 夹 D:\Web_Service, 将 上 面 编译 后 生成 的 Web 服务 程序 复制 到 该 文件 夹 下 。 
我 们 既 可 以 将 这 个 Web 服务 配置 成 单独 一 个 网 站 来 提供 服务 ,也 可 以 将 它 配 置 成 某 个 现 有 
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于 service Web 服务 - Micro: Internet Explorer 


| 


Service 
单 击 此 处 ， 获 职 充 整 的 操作 列表 。 


getmyTable 

从 数据 表 中 读 取 数据 ， 以 表格 方式 显示 出 来 。 

测试 
若 要 使 用 HTTP POST 协议 对 拘 作 进行 测试 ， 请 单 击 “ 调 用 ”按钮 
数值 
ConnectionString; [server=localhost;database=northwind;uid=sa;pwd=12 
SelectsQL: [eet*fromemployeed 


图 6-23 ”getmyTable 方 法 的 测试 页 面 


网 站 下 的 一 个 虚拟 目录 来 提供 服务 。 本 书 第 2 章 关于 新 建 网 站 和 新 建 虚拟 目录 方面 的 内 容 
已 作 详细 介绍 。 我 们 在 “Internet 信息 服务 ”管理 器 中 新 建 一 个 网 站 , 主 目录 设 为 D:\Web_ 
Service, 网 站 端口 号 为 80,IP 地 址 为 192. 168. 0. 22 ,选择 ASP. NET 2.0。 此 时 Web 服务 
便 可 以 向 Web 客户 端 提供 服务 。 

(7) 下 面 在 ASP. NET Web 应 用 程序 中 调用 这 个 Web 服务 。 首 先 新 建 一 个 ASP. NET 
Web 应 用 程序 。 在 VS 2010 中 创建 一 个 新 网 站 后 ,在 解决 方案 资源 管理 器 中 鼠标 右 击 解决 方 
案 ,然后 选择 “添加 Web 引用 ”菜单 ,弹出 “添加 Web 引用 ”对 话 框 ,如 图 6-24 所 示 。 


添加 Web 引用 


上 Sa Ne 
promi 


使 用 该 页 作为 查 Web Rs。 您 可 以 单 击 下 面 的 链接 ， 或 
者 在 地 址 栏 中 键入 已 知 的 


浏览 至 : 
。 Web 服务 


。 本 地 计算 机 上 的 ¥eb 服务 


。 浏览 本 地 网 络 上 的 0DDI 服务 器 
在 您 的 本 地 网 络 上 查询 UDDI 服务 器 。 


图 6-24 “添加 Web 引用 ”对 话 框 
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对 话 框 中 有 3 种 选项 用 来 查找 Web 服务 : 此 解决 方案 中 的 Web 服务 , 即 调 用 当前 应 
用 程序 中 自 建 的 Web 服务; @@ 本 地 计算 机 上 的 Web 服务 ,即使 用 本 机 在 其 他 网 站 中 创建 
的 Web 服务 ; @@ 浏 览 本 地 网 络 上 的 UDDI 服务 器 , 即 在 本 地 网 络 中 查找 Web 服务 以 供 当 
前 应 用 系统 调用 。 
在 地 址 栏 中 输入 刚才 建立 的 Web 服务 的 地 址 : http://192. 168. 0. 22/Service. asmx， 
按 回 车 键 或 单 击 “ 前 往 ” 按 钮 ,结果 如 图 6-25 所 示 。 上 默认 的 Web 引用 名 为 WebReferences， 
这 个 名 称 很 重要 , 它 是 程序 将 使 用 的 Web 服务 对 象 名 ,修改 它 为 myWebService, 然 后 单 击 
“添加 引用 ”按钮 。 此 时 会 在 解决 方案 资源 管理 器 中 自动 添加 一 个 App_WebReferences 文 
件 夹 ,其 下 新 建 myWebService 文件 夹 ,其 中 自动 生成 3 个 文件 Service. disco、 Service. 
discomap 和 Service. wsdl。disco 文件 为 静态 发 现 文件 ,用 来 确定 Web 服务 的 位 置 。 
Service. wsdl 则 为 Web 服务 的 页 面 描述 文件 。 
| 添加 web 引用 
请 定位 到 提供 Web 服务 的 URL ,然后 单 击 "添加 引用 ”, 添加 位 于 URL 上 的 所 有 可 用 服务 。 
OFAE 9| 男 因 人 


LEREU http:/192.168.0.2215ervice.asmx S| 口 放生 


支持 下 列 操作 。 有 关 正 式 定义 ， 请 查看 服务 说 明 。 


® HelloWorld 


® Max 
在 输入 的 三 个 数 中 返回 最 大 的 一 个 


e。 getmyTable 


从 数据 表 中 读 取 数 据 ， 以 表格 方式 显示 出 来 webreference 


此 Web 服务 使 用 http:/ /tempuri.org/ 作为 默认 命名 空间 
建议 : 公开 XML Web services 之 前 ， 请 更 改 默认 命名 空间 - 
每 个 XML Web services 都 需要 一 个 唯一 的 命名 空间 ,以 便 客户 端 应 用 


程序 能 够 格 它 与 Web 上 的 其 地 服务 区 分 开 ，http;//ternpuri.org/ 可 用 
于 处 于 开发 阶段 的 XML Web services ,而 已 发 布 的 XML Web 加 
einsc 应 信用 更 由 他 二 间 
上 


图 6-25 ”添加 建立 的 Web 服务 


(8) 在 Web 窗 体 中 调用 Web 服务 。 调 用 方法 如 下 。 
O@ 建立 Web 服务 myWebservice 的 一 个 引用 实例 myService: 


myWebservice. Service myService = new myWebservice. Service( ); 
@ 调用 myService 对 象 的 方法 HelloWorld、Max 和 getmyTable 等 ,例如 : 
myService. Max(3,100,60) 


下 面 在 Default. aspx 窗 体 的 Default. aspx. cs 后 台 代 码 中 调用 上 述 Web 服务 ,代码 
如 下 : 


364 
开发 技术 (第 2 版 ) 


using System; 

using System. Data; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 


public partial class _Default : System. Web. UI. Page 
{ 
protected void Page Load(object sender, EventArgs e) 
{ // 建立 Web 服务 myWebservice 的 一 个 引用 实例 
myWebservice. Service myService = new myWebservice. Service( ); 


Response. Write(myService. HelloWorld() + "<br>"); 
Response. Write(myService. Max(3,100,60) + "<br>"); 


string ConStr = "server = localhost; database = northwind; uid= sa;pwd = docman;"; 
string Sql = "select * from employees"; 
Response. Write(myService. getmyTable(ConStr, Sql) + "<br>"); 


} 


将 Default. aspx 窗 体 设 为 起 始 页 ,运行 后 就 会 在 浏览 器 中 看 到 调用 Web 服务 的 结果 。 
如 果 要 在 当前 应 用 中 新 建 并 调用 Web 服务 ,可 鼠标 右键 单 击 * 解 决 方案 资源 管理 器 "中 的 项 
目 名 称 。 然 后 选择 “添加 ”|* 新 建 项 ,再 选择 左 侧 的 ”Web” 后 ,选择 Web 服务 ,然后 在 代码 
视图 中 输入 Web 服务 的 各 种 方法 ,在 设 为 起 始 页 运行 后 ,其 他 应 用 可 通过 添加 服务 引用 来 
调用 。 

通过 上 述 例子 ,读者 可 以 体会 Web 服务 具有 如 下 技术 特点 。 

(1) 跨 防 火 墙 的 通信 。 

客户 端 和 Web 服务 器 之 间 通 常会 有 防火 墙 或 者 代理 服务 器 。 采 用 传统 的 分 布 式 组 件 
技术 ,例如 DCOM(Distribured Component Object Model) 可 能 会 通信 失败 。 

(2) 应 用 程序 集成 。 

企业 中 经 常 都 要 把 用 不 同 语言 写成 的 、 在 不 同 平台 上 运行 的 各 种 程序 集成 起 来 。 例 如 
应 用 程序 可 能 需要 从 运行 在 IBM 主机 上 的 程序 中 获取 数据 ,或 者 把 数据 发 送 到 主机 或 
UNIX 应 用 程序 中 去 。 即 使 在 同一 个 平台 上 ,不同 软件 厂商 生产 的 各 种 软件 也 常常 需要 集 
成 起 来 。 通 过 Web Services ,应 用 程序 可 以 用 标准 的 方法 把 功能 和 数据 “暴露 "出 来 , 供 其 他 
应 用 程序 使 用 。 

例如 ,有 一 个 订单 录入 程序 ,用 于 录入 从 客户 来 的 新 订单 ,包括 客户 信息 、 发 货 地 址 、 数 
量 、 价 格 和 付款 方式 等 内 容 ; 还 有 一 个 订单 执行 程序 ,用 于 实际 货物 发 送 的 管理 。 这 两 个 程 
序 来 自 不 同 软件 厂商 。 一 份 新 订单 进来 之 后 ,订单 录入 程序 需要 通知 订单 执行 程序 发 送 货 
物 。 通 过 在 订单 执行 程序 上 面 增加 一 层 Web Services, 订 单 执行 程序 可 以 把 “Add Order” 函 
数 “ 暴 露 ” 出 来 。 这 样 ,每 当 有 新 订单 到 来 时 ,订单 录入 程序 就 可 以 调用 这 个 函数 来 发 送 货物 了 。 

(3) B2B 集成 。 

跨 公司 的 商务 交易 集成 通常 就 叫做 B2B 集成 。Web Services 是 B2B 集成 成 功 的 关键 。 
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通过 Web Services, 公 司 可 以 把 关键 的 商务 应 用 “暴露 ”给 指定 的 供应 商 和 客户 。 例 如 ,把 电 
子 下 单 系统 和 电子 发 票 系统 “暴露 ”出 来 ,客户 就 可 以 以 电子 的 方式 发 送 订单 ,供应 商 则 可 以 
以 电子 的 方式 发 送 原料 采购 发 票 。 当 然 , 这 并 不 是 一 个 新 的 概念 ,EDI( 电 子 文档 交换 ) 早 就 
是 这 样 了 。 但 是 , Web Services 的 实现 要 比 EDI 简单 得 多 ,而 且 Web Services 运行 在 
Internet 上 ,在 世界 任何 地 方 都 可 轻易 实现 ,其 运行 成 本 就 相对 较 低 。 用 Web Services 来 实 
现 B2B 集成 的 最 大 好 处 在 于 可 以 轻易 实现 互 操作 性 。 只 要 把 商务 逻辑 “暴露 ”出 来 ,成 为 
Web Services ,就 可 以 让 任何 指定 的 合作 伙伴 调用 这 些 商 务 逻 辑 , 而 不 管 他 们 的 系统 在 什么 
平台 上 运行 ,使 用 什么 开发 语言 。 这 样 就 大 大 减少 了 花 在 B2B 集成 上 的 时 间 和 成 本 ,让 许 
多 原本 无 法 承受 EDI 的 中 小 企业 也 能 实现 B2B 集成 。 

(4) 软件 和 数据 重用 。 

软件 重用 是 一 个 很 大 的 主题 ,重用 的 形式 很 多 ,重用 的 程度 也 有 大 有 小 。 最 基本 的 形式 
是 源 代码 模块 或 者 类 一 级 的 重用 , 另 一 种 形式 是 二 进 制 形式 的 组 件 重 用 。 

当前 , 像 表 格 控件 或 用 户 界面 控件 这 样 的 可 重用 软件 组 件 ,在 市 场 上 都 占有 很 大 的 份 
额 。 但 这 类 软件 的 重用 有 一 个 很 大 的 限制 ,就 是 重用 仅 限于 代码 ,数据 不 能 重用 。 原 因 在 
于 ,发 布 组 件 甚至 源 代码 都 比较 容易 ,但 要 发 布 数据 就 没 那么 容易 ,除非 是 不 会 经 常 变化 的 
静态 数据 。 

Web Services 在 允许 重用 代码 的 同时 ,可 以 重用 代码 背后 的 数据 。 使 用 Web Services， 
再 也 不 必 像 以 前 那样 ,要 先 从 第 三 方 购买 .安装 软件 组 件 ,再 从 应 用 程序 中 调用 这 些 组 件 
只 需要 直接 调用 远 端 的 Web Services 就 可 以 了 。 例 如 要 在 应 用 程序 中 确认 用 户 输入 的 地 
址 ,只 需 将 这 个 地 址 直接 发 送 给 相应 的 Web Services, 这 个 Web Services 就 会 帮 你 查阅 街 
道 地 址 ,城市 .省 区 和 邮政 编码 等 信息 ,确认 这 个 地 址 是 否 在 相应 的 邮政 编码 区 域 。Web 
Services 的 提供 商 可 以 按时 间或 使 用 次 数 来 对 这 项 服务 进行 收费 。 这 样 的 服务 要 通过 组 件 
重用 来 实现 是 不 可 能 的 ,那样 的 话 你 必须 下 载 并 安装 好 包含 街道 地 址 、 城 市 .省 区 和 邮政 编 
码 等 信息 的 数据 库 , 而 且 这 个 数据 库 还 是 不 能 实时 更 新 的 。 

另 一 种 软件 重用 的 情况 是 ,把 好 几 个 应 用 程序 的 功能 集成 起 来 。 例 如 ,要 建立 一 个 局 域 
网 上 的 门户 站 点 应 用 ,让 用 户 既 可 以 查询 联邦 快递 包 庄 ,查看 股市 行情 ,又 可 以 管理 自己 的 
日 程 安排 ,还 可 以 在 线 购买 电影 票 。 现 在 Web 上 有 很 多 应 用 程序 供应 商 , 都 在 其 应 用 中 实 
现 了 这 些 功 能 。 一 旦 他 们 把 这 些 功 能 都 通过 Web Services“ 暴 露出 来 ,就 可 以 非常 容易 地 
把 所 有 这 些 功 能 都 集成 到 你 的 门户 站 点 中 ,为 用 户 提 供 一 个 统一 的 、 友 好 的 界面 。 

将 来 ,许多 应 用 程序 都 会 利用 Web Services, 把 当前 基于 组 件 的 应 用 程序 结构 扩展 为 组 
件 /Web Services 的 混合 结构 ,可 以 在 应 用 程序 中 使 用 第 三 方 的 Web Services 提供 的 功能 ， 
也 可 以 把 自己 的 应 用 程序 功能 通过 Web Services 提供 给 别人 。 两 种 情况 下 ,都 可 以 重用 代 
码 和 代码 背后 的 数据 。 


6.7 ”Web 开发 中 的 类 库 构建 与 访问 


在 Web 开发 过 程 中 ,将 许多 通用 的 完成 一 定 功 能 的 方法 或 结构 等 独立 出 来 , 放 在 类 库 
中 ,编译 后 形成 一 个 动态 链接 库 DLL 文件 ,在 Web 应 用 程序 中 通过 添加 引用 后 ,就 可 实现 
代码 的 重用 。 
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6.7.1 在 Web 开发 中 构建 一 个 类 库 


创建 类 库 过 程 如 下 : 

(1) 进入 VS 2010 ,新 建 一 个 项 目 ,项 目 类 型 选择 Visual C# ,选择 “Windows” 下 的 类 库 
模板 ,默认 类 库 名 称 为 ClassLibraryl , 改 为 WebClassLib , 单 击 * 确 认 ” 按 钮 后 形成 类 库 模板 
代码 。 

(2) 在 解决 方案 资源 管理 器 中 , 右 击 “引用 ”然后 添加 必要 的 . NET 组 件 名 称 ,例如 
System. Web、System. Configuration 等 ,以 便 在 类 代码 中 可 以 引用 对 应 的 命名 空间 。 将 类 
文件 名 Classl. cs 改 为 myClass. cs ,方法 是 单 击 解决 方案 资源 管理 器 中 的 文件 Classl. cs, 右 
击 选择 重 命名 或 直接 按 下 F2 来 修改 。 在 代码 窗口 中 即 添 加 了 对 命名 空间 的 引用 ,这 里 定 
义 了 3 个 方法 Query、CloseWindow ,marriageCodeList, 完 整 代码 如 下 : 


using System/ 

using System. Collections. Generic; 
using System. Text; 

using System. Data; 

using System, Data, SqlClient; 
using System, Collections; 

using System. Web. UI. WebControls; 
using System. Configuration; 


namespace WebClassLib // 此 名 称 为 将 来 访问 此 类 库 文件 的 命名 空间 
{ 
public class myClass 
{ 
public static DataSet Query( string sql, string Proc_name) 
{ 
# if (!DEBUG) // 程 序 调试 过 程 中 ,参数 传人 的 传 出 过 程 名 无 效 ,采用 p_test 
Proc name = "p test"; 
#else 
Proc_name = "p_Query"; 
#endif 
SqlConnection conn = new SqlConnection (ConfigurationManager. AppSettings 
["ConnString"]); 


SqlCommand cmd = new SqlCommand( ) ; 

cmd. Connection = conn; 

cmd. CommandType = CommandType. StoredProcedure; 

cmd. CommandText = Proc name; 

SqlParameter paramSQL; 

paramSQL = new SqlParameter("(@SQL", SqlDbType. VarChar, 1000); 
paramSQL. Value = sql; 

cmd. Parameters. Add( paramSQL); 


conn. Open( ); 
SqlDataAdapter sda = new SqlDataAdapter(cmd); 
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DataSet ds = new DataSet(); 
sda. Fill(ds); 
conn. Close(); 


return ds; 
J 
public static void CloseWindow( System. Web. UI. Page page) 
{ 
Literal lt = new Literal(); 
1t. Text = "< script> window.close();</script >"; 
page. Controls. Add( 1t); 
} 


# region // 用 region 和 endregion 可 以 实现 折 全 程序 代码 
public static ListItemCollection marriageCodeList() 
{ 
ListItem 1i; 
ListItemCollection lic = new ListItemCollection(); 
1i = new ListItem("——", "0"); 
lic. Add(1i); 
1i = new ListItem(" 未 婚 "，"1"); 
lic. Add(1i); 
1i = new ListItem(" 已 婚 ","2"); 
lic. Add(1i); 
1i = new ListItem(" 离 婚 "，"3"); 
lic. Add(1i); 
1i = new ListItem(" 其 他 ", "4"); 
lic. Add(1i); 
return lic; 
} 
# endregion 


} 


(3) 选择 主 菜单 中 的 “生成 ”1“ 生 成 WebClassLib”, 如 果 程 序 没有 错误 的 话 , 就 会 在 默 
认 文 件 夹 “ 我 的 文档 ”下 的 Visual Studio 2010\Projects\WebClassLib\ WebClassLib\ bin\ 
Debug 中 生成 WebClassLib. dll 文件 。 这 样 一 个 类 库 文件 就 生成 了 。 该 类 库 文件 就 可 分 发 
给 Web 开发 人 员 使 用 。 


6.7.2 在 Web 开发 中 访问 类 库 


下 面 介绍 我 们 在 现 有 的 一 个 网 站 中 使 用 上 述 类 库 进 行 Web 开发 。 

(1) 打开 VS 2010 ,打开 一 个 已 建 网 站 ,在 “解决 方案 资源 管理 器 ”中 , 右 击 “引用 ”|* 添 
加 引用 ”, 出 现 “ 添 加 引用 ”对 话 框 , 单 击 “ 浏 览 ” 标 签 ,选择 类 库 文件 WebClassLib. dll 的 存放 
目录 ,将 它 加 入 到 解决 方案 资源 管理 器 中 。 可 以 看 到 在 解决 方案 资源 管理 器 中 增加 了 一 个 
bin 目录 ,类 库 文件 就 放 在 该 文件 夹 下 。 

(2) 在 Web 窗 体 的 后 台 代码 中 ,必须 引用 WebClassLib 命名 空间 ,下 面 代码 显 示 了 如 
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何 调用 类 库 


using System; 
using SYstem. Data; 
using System. Web; 
using System. Web. UI; 
using WebClassLib; // 引 用 WebclassLib 命名 空间 
public partial class Default : System. Web. UI. Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
WebClassLib. myClass myc = new WebClassLib. myClass(); 
DropDownList1. DataSource = myc.marriageCodeList(); // 绑 定数 据 
DropDownList1. DataBind( ); 
//WebClassLib. myClass. CloseWindow(this); // 调 用 类 库 中 的 方法 


6.8 Web 控件 开发 实例 


基于 组 件 的 开发 允许 开发 者 把 应 用 程序 逻辑 划分 为 离散 的 \ 独 立 的 块 。 前 面 介绍 的 类 
库 构 建 和 访问 是 一 种 没有 用 户 界面 的 组 件 开发 方法 。 但 在 开发 过 程 中 也 会 遇 到 构建 一 些 通 
用 的 具有 界面 的 组 件 的 需求 ,这 种 具有 界面 的 组 件 称 为 可 视 化 控件 。VS 2010 已 经 提供 了 
很 多 Web 开发 控件 ,例如 用 户 的 登录 控件 login 等 ,它们 放 在 工具 箱 中 供用 户 开发 时 使 用 。 
采用 由 可 重用 的 代码 单元 构建 的 控件 的 好 处 就 是 可 以 创建 模块 化 Web 应 用 程序 。 在 VS 
2010 中 创建 Web 控件 一 般 有 两 种 方法 : 四 自 定 义 用 户 控件 ; 四 创建 工具 箱 控 件 。 


6.8.1 建立 用 户 自 定 义 控 件 


在 VS 2010 中 可 以 创建 自 定义 用 户 控件 。 自 定义 Web 用 户 控件 本 质 上 就 是 构建 一 个 
Web 窗 体 , 把 整个 Web 窗 体 当 作 一 个 控件 来 使 用 。 将 该 Web 窗 体 用 一 个 ascx 为 扩展 名 的 
文件 保存 起 来 , 假设 为 WebUserControl. ascx, 关联 的 后 台 服 务 器 代码 就 放 在 
WebUserControl. ascx. cs 中 。 用 户 控 件 不 能 作为 一 个 Web 窗 体 来 运行 ,可 以 将 用 户 控件 
放 在 其 他 Web 窗 体 中 作为 一 个 独立 控件 来 使 用 。 这 样 一 来 ,在 多 个 Web 窗 体 中 就 可 以 多 
次 使 用 用 户 控 件 , 实 现 界 面 和 代码 的 重用 。 

1. 构建 Web 用 户 控件 

在 当前 网 站 中 添加 新 项 ,控件 名 称 为 WebUserControl. ascx, 选 择 “Web 用 户 控件 ? 模 
板 , 单 击 “ 确 定 ” 按 钮 后 ,在 解决 方案 资源 管理 器 中 生成 两 个 文件 WebUserControl. ascx 和 
WebUserControl. ascx. cs。 在 “设计 ”视图 中 , 放 入 工具 箱 中 的 各 种 Web 控件 构建 其 他 Web 
窗 体 需要 重用 的 界面 ,编写 程序 后 台 处 理 代码 后 保存 。 例 如 ,设计 一 个 简单 的 登录 界面 的 
WebUserControl. ascx 文件 内 容 为 : 
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<$ 四 Control Language = "C 井 "RutoEventWireup = "true" CodeFile = "WebUserControl. ascx.cs" 

Inherits = "WebUserControl" %> 
<asp:Panel ID = "Panell" runat = "server" Height = "116px" Width= "281px"> 

用 户 名 : <asp:TextBox ID = "TextBox1" runat = "server"></asp:TextBox> <br /> 

密码 : < asp:TextBox ID = "TextBox2" runat = "server" 

OnTextChanged = "TextBox2_TextChanged"></asp:TextBox><p /> 

<asp:Button ID = "Buttonl" runat = "server" Text = "OK" Width = "42px" OnClick = "Buttonl_Click" /> 
<asp:Button ID = "Button2" runat = "server" Text = "Reset" OnClick = "Button2 Click" /></asp: 
Panel> 


WebUserControl. ascx. cs 代码 为 : 


using System; 

using System. Data; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 
using System. Web. UI. HtmlControls; 


public partial class WebUserControl : System. Web. UI. UserControl 


{ 
protected void Button2 Click(object sender, EventArgs e) 
{ TextBoxl.Text = ""; 
TextBox2. Text = ""; 
} 
protected void Buttonl_Click(object sender, EventArgs e) 
{ Response.Write(TextBoxl.Text); 
b 


2. 使 用 Web 用 户 控 件 

定义 的 用 户 控件 可 以 多 次 嵌入 到 不 同 的 Web 窗 体 中 进行 重用 。 在 一 个 新 建 的 Web 窗 
体 Defaultl. aspx 中 ,用 鼠标 将 解决 方案 资源 管理 器 中 的 ascx 控件 文件 拖 放 到 Web 窗 体 
中 ,形成 的 Web 窗 体 代码 为 : 


1 <%(@ Page Language = "C#" RutoEventWireup = "true" CodeFile = "Default1.aspx.cs" 

2 Inherits="Defaultl" %> 

3 <$%(@ Register Src = "WebUserControl.ascx" TagName = "WebUserControl" TagPrefix= "ucl" %> 
4 <html xmlns = "http://www.w3.org/1999/xhtml" > 

5 <head runat = "server"> <title> 无 标题 页 </title></head> 

6 

vy 

8 

9 


<body> 
<form id= "forml" runat = "server"> 
<div> 
<ucl:WebUserControl ID = "WebUserControll" runat = "server" /> 
10 </div> 
EE </form> 
12 </body> 


13 </html> 
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代码 中 第 3 行 指 定 该 页 面 将 引用 一 个 TagName 为 WebUserControl 的 用 户 控件 ,Src 
指定 用 户 控 件 文件 的 位 置 。 第 9 行 是 呈现 用 户 控 件 的 代码 ,其 前 绥 ucl 在 第 3 行 的 
TagPrefix 中 指定 ,可 以 更 改 成 当前 页 面 中 的 唯一 的 标识 。 

另外 我 们 还 可 通过 后 台 编 程 方式 动态 调用 用 户 控件 ,方法 是 在 需要 填 人 控件 的 地 方 , 放 
一 个 容器 ,比如 td, 并 设 定 在 服务 器 端 运行 ,例如 : 


<TD id= "tdpan" runat = server></TD> 


然后 在 后 台 . cs 代码 中 动态 装 和 用户 控件 ,代码 如 下 : 


UserControl myusercontrol = (UserControl) LoadControl (" 一 /WebUserControl.ascx") ; 
tdpan. Controls. Clear( ); 
tdpan. Controls. Add(myusercontrol); 


如 果 要 在 其 他 Web 开发 者 之 间 共 享 定义 的 用 户 控件 ,可 直接 复制 . ascx 文件 和 相应 的 
cs 文件 到 当前 解决 方案 资源 管理 器 中 。 


6.8.2 工具 箱 控件 的 创建 与 使 用 


ASP.NET 4.0 允许 你 自 定义 工具 箱 控件 ,其 中 新 的 自 适应 呈现 模型 减少 了 编写 可 专 
门 识别 其 目标 浏览 器 的 控件 的 需要 。 换 句 话 说 ,控件 开发 人 员 可 以 专注 于 控件 设计 ,而 让 
ASP. NET 框架 负责 转换 控件 并 针对 不 同类 型 的 浏览 器 和 设备 呈现 它 。 创 建 自 定 义 服务 器 
控件 要 用 到 HtmlTextWriter 类 ,其 主要 功能 就 是 输出 标记 字符 和 文本 输出 ,另外 工具 箱 中 
控件 的 属性 在 编辑 器 上 是 分 类 的 ,如 外 观 , 行 为 .布局 等 ,这 些 属性 通过 元 数据 来 制定 。 元 数 
据 写 法 如 [CategoryAttribute ( " Appearance")]。 要 使 用 元 数据 , 必须 引用 System. 
ComponentModel 命名 空间 。 

【 例 6.46】 构建 一 个 如 图 6-26 所 示 的 工具 箱 控件 。 新 建 。 卫 有 让 到 Ts 下 
一 个 类 库 项 目 ToolBoxControl, 添 加 引用 System. Web 命名 空 aa 

名 CE 

间 , 然 后 把 下 面 的 代码 放 在 Classl. cs 类 文件 中 ,编译 后 形成 。 好 所 使 有 | 间 ”后 司 F 梧 
ToolBoxControl. dll 文件 。 该 文件 默认 位 置 在 我 的 文档 中 的 ms 
Visual Studio 2010\Projects\ToolBoxControl \ToolBoxControl\bin 图 6-26 工具 箱 控件 的 效果 
\Debug 下 。 

接着 在 Web 网 站 中 的 工具 箱 中 , 右 击 “常规 ”, 选 择 “ 选 择 项 ”, 通 过 浏览 找到 生成 的 dll 
文件 ,会 发 现 . NET Framework 组 件 列表 框 中 已 经 增加 了 CreditCardForm 组 件 , 单 击 “ 确 
定 ” 按 钮 ,工具 箱 自动 帮 你 加 上 自 定义 的 控件 。 

自 定 义 控件 中 放置 了 6 个 HTML 控件 。HTML 控件 前 面 有 4 个 用 户 可 读 写 的 文本 标 
签 属性 。 类 文件 Classl. cs 代码 如 下 : 


using System; 
using System. Web. UI; 
using System. ComponentModel; 


namespace CustomComponents // 命 名 空间 的 定义 ,可 改 为 其 他 
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[DefaultPropertyAttribute("CardholderNameText")]// 指 定 控件 的 默认 属性 
//1. 控 件 标 签 定义 .{0} 为 将 来 用 户 自 定义 的 控件 标识 .定义 中 指定 了 几 个 初始 值 
[ToolboxData( @"<{0} :CreditCardForm PaymentMethodText = ' 信 用 卡 类 型 ' 
CreditCardNoText = ' 信 用 卡 卡号 ' CardholderNameText = ' 信 用 卡 持 有 者 姓名 ' 
SubmitButtonText = ' 提 交 ' runat = 'server></{0} :CreditCardForm>")] 
//2. 构建 继承 了 Control 类 的 CreditCardFornm 控件 类 
public class CreditCardForm : Control 
{ 
private string paymentMethodText = "信用 卡 类 型 "; 
private string creditCardNoText = "信用 卡 卡号 "; 
private string cardholderNameText = "信用 卡 持 有 者 姓名 "; 
private string expirationDateText = "最 后 使 用 时 间 ":; 
private string submitButtonText = "提交 "; 


[BrowsableAttribute(true)] // 该 属性 是 否 放 在 属性 窗口 中 
[DescriptionAttribute(" 获 取 和 设置 信用 卡 类 型 ")] // 该 属性 的 描述 说 明 
[DefaultValueAttribute(" 信 用 卡 类 型 ")] // 指 定 属性 的 默认 值 
[CategoryAttribute("Appearance")] // 指 定 该 属性 将 放 在 外 观 类 
public virtual string PaymentMethodText // 定 义 该 属性 的 名 称 和 是 否 可 读 写 
{ get { return this.paymentMethodText; } 

set { this. paymentMethodText = value; } 
} 


[BrowsableAttribute(true)] 
[DescriptionAttribute( "获取 或 设置 信用 卡 卡号 ")] 
[DefaultValueAttribute(" 信 用 卡 卡号 ")] 
[CategoryAttribute("Appearance")] 
public virtual string CreditCardNoText 
{ get { return this.creditCardNoText; } 

set { this. creditCardNoText = value; } 
} 


[BrowsableAttribute(true)] 
[DescriptionAttribute( "获取 或 设置 信用 卡 持 有 者 姓名 ")] 
[DefaultValueAttribute(" 信 用 卡 持 有 者 姓名 ") ] 
[CategoryAttribute("Appearance")] 
public virtual string CardholderNameText 
{ get { return this.cardholderNameText; } 

set { this.cardholderNameText = value; } 
| 


[BrowsableAttribute(true)] 
[DescriptionAttribute(" 获 取 或 设置 最 后 使 用 时 间 ")] 
[DefaultValueAttribute(" 最 后 使 用 时 间 ")] 
[CategoryAttribute("Appearance")] 
public virtual string ExpirationDateText 
{ get { return this. expirationDateText; } 
set { this. expirationDateText = value; } 
1 
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[BrowsableAttribute(true)] 
[DescriptionAttribute( "获取 或 设置 按钮 标签 ")] 
[DefaultValueAttribute( "提交")] 
[CategoryAttribute("Appearance")] 
public virtual string SubmitButtonText 
{ 

get { return this. submitButtonText; } 

set { this. submitButtonText = value; } 


protected override void Render(HtmlTextWriter writer) 
{ ”// 以 HTML 表格 方式 呈现 控件 外 形 ,也 可 设计 成 其 他 方式 如 div 
writer.Write("< table style= 'width:287px; height:124px; border - width:0; >"); 
writer. Write("<tr><td>" + PaymentMethodText + "</td>"); 
writer. Write( "< td>< select name = 'PaymentMethod' id = 'PaymentMethod' style= 'width:100% ;>"); 
writer. Write( "< option value = '0'> Visa </option >"); 
writer. Write( "< option value = '1> MasterCard </option></select > </td></tr >"); 
writer, Write("<tr><td>" + CreditCardNoText + "</td>"); 
writer, Write("< td>< input name = 'CreditCardNo' id = 'CreditCardNo' type = 'text' /></td>"); 
writer. Write("</tr >"<tr><td>" + CardholderNameText + "</td>"); 
writer. Write( "< td>< input name = 'CardholderName' id = 'CardholderName' type = 'text' /></td>"); 
writer. Write("</tr ><tr><td>" + ExpirationDateText + "</td>"); 
writer. Write("< td>< select name = 'Month' id = 'Month>"); 


for (int day = 1; day < 13; day++) 
{ if (day<10) 
writer. Write( "< option value = '" + day. ToString() + "'>"” + "0" + day. ToString() + 
"</option>"); 
else 
writer. Write("<option value = '" + day.ToString() + ">" + day.ToString() + "</option>"); 
} 
writer. Write( "</select > gnbsp;< select name = 'Year' id = 'Year >"); 
for (int year = 2005; year < 2015; year++) 
{ 
writer. Write("< option value= '" + year.TbString() + ">" + year.ToString() + "</option>"); 
} 
writer. Write("</select ></td></tr ><tr><td align= 'center' colspan= '2>"); 
writer. Write("< input type= 'submit'value= '" + SubmitButtonText + "'/>"); 
writer. Write("</td></tr ></table>"); 
base. Render(writer); // 呈 现 控件 


代码 中 用 大 量 的 字符 串 来 输出 HTML ,而 且 容易 输 错 ,所 以 HtmlTextWriter 类 也 提供 
AddStyleAttribute\AddAttribute、RenderBeginTag 和 RenderEndTag 几 个 有 用 的 方法 来 
改善 输出 的 复杂 性 ,此 处 不 再 介绍 ,可 参阅 相关 资料 。 

将 自 定义 工具 箱 控 件 拖 动 到 Web 窗 体 设计 界面 中 ,就 可 以 和 其 他 Web 控件 一 样 来 使 
用 它 。 页 面 文件 中 增加 了 控件 注册 和 标签 输出 两 部 分 。 控 件 注册 中 ,程序 集 Assembly 即 
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为 类 库 名 ,命名 空间 为 类 库 代 码 中 定义 的 ,控件 标签 ccl 可 改 为 其 他 唯一 的 标识 。 


<%@ Register Assembly = "ToolBoxControl” Namespace= "CustomComponent's" TagPrefix = "cc1l" $%> 


<ccl:creditcardform id = "CreditCardForm1" runat = "server"” cardholdernametext = "信用 卡 持 有 
者 姓名 "” creditcardnotext = "信用 卡 卡号 ” paymentmethodtext = "信用 卡 类 型 ”submitbuttontext = 
"提交 "></ccl:creditcardform> 


6.9 ASP. NET 中 XML 编程 基础 


ASP. NET 通过 System. Xml 命名 空间 为 开发 者 提供 了 操纵 XML 的 所 有 功能 。 该 命 
名 空间 包含 许多 类 ,主要 类 名 称 如 表 6-58 所 示 。 


类 


表 6-58 System. Xml 命名 空间 中 常用 类 名 称 
说 明 


XmlAttribute 


XmlCDataSection 


XmlCharacterData 


XmlComment 


XmlConvert 


Xm 
Xm 
Xm 
Xm 
Xm 
Xm 
Xm 
Xm 
Xm 
Xml 
Xml 
Xml 
Xml 


Xm 


DataDocument 
Declaration 
Document 
DocumentType 
Element 
Exception 
Node 
NodeList 
NodeReader 
Reader 

Text 
TextReader 
TextWriter 


Writer 


表示 一 个 属性 。 此 属性 的 有 效 值 和 默认 值 在 文档 类 型 定义 (DTD) 或 架构 中 进行 
定义 

表示 CDATA 节 

提供 多 个 类 使 用 的 文本 操作 方法 

表示 XML 注释 的 内 容 

对 XML 名 称 进 行 编码 和 解码 ,并 提供 方法 在 公共 语言 类 型 库 类 型 和 XML 架构 定 
义 语言 (XSD) 类 型 之 间 进 行 转换 。 当 转换 数据 类 型 时 ,返回 的 值 是 独立 于 区 域 设 
置 的 

允许 通过 相关 的 DataSet 存储 ,检索 和 操作 结构 化 数据 

表示 XML 声明 结 点 : 过? xml version 一 '1.0'.…? 二 

表示 XML 文档 

表示 文档 类 型 声明 

表示 一 个 元 素 

返回 有 关 最 后 一 个 异常 的 详细 信息 

表示 XML 文档 中 的 单个 结 点 

表示 排序 的 结 点 集合 

表示 提供 对 XmlNode 中 的 XML 数据 进行 快速 非 缓存 的 只 进 访问 的 读 取 器 
表示 提供 对 XML 数据 进行 快速 . 非 缓存 .只 进 访问 的 读 取 器 

表示 元 素 或 属性 的 文本 内 容 

表示 提供 对 XML 数据 进行 快速 、 非 缓存 .只 进 访问 的 读 取 器 

表示 提供 快速 , 非 缓 存 . 只 进 方法 的 编写 器 ,该 方法 生成 包含 XML 数据 [这 些 数据 
符合 W3C 可 扩展 置 标语 言 (XML) 1.0 和 “XML 中 的 命名 空间 ”建议 ] 的 流 或 文件 
表示 一 个 编写 器 ,该 编写 器 提供 一 种 快速 、 非 缓存 和 只 进 的 方式 来 生成 包含 XML 
数据 的 流 或 文件 


ASP. NET 中 有 关 XML 编程 的 技术 内 容 相 当 广 泛 。 本 书 在 此 仅 通 过 下 面 3 个 例子 来 
让 读者 体会 XML 的 编程 过 程 。 

【 例 6.47】 将 SQL Server Northwind 数据 库 中 的 Customers 数据 表 中 的 数据 转换 成 
一 个 XML 文档 。 完 整 代码 如 下 : 
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using System 


using System. 


using System 


using System. 


using System 
using System 
using System 


using System. 


7 

Data; 

,Collections; 

Web; 

. Web. UI; 

.Web. UI. WebControls; 

.Data. SqlClient; 

Xml; // 必 须 引用 此 命名 空间 


public partial class Write2XML : System. Web. UI. Page 
{ protected void Page Load(object sender, EventArgs e) 
{ string conStr = "Server= (local);database = northwind; Uid= sa;Pwd= docman"; 
string mysql = "SELECT * FROM Customers"; 
SqlConnection conn = new SqlConnection(conStr); 
conn. Open( ); 


try 
{ 


} 


SqlDataAdapter da = new SqlDataAdapter(mysql, conn); 
DataSet ds = new DataSet(); 

da.Fill(ds, "Customers"); 

DataTable dt = ds.Tables["Customers"]; 


//1. WriteXml 方法 可 直接 将 DataTable 中 的 所 有 数据 写 人 XML 文档 


dt. Writexm](@"D:\Customers1. xml1"); // 写 到 服务 器 的 D 盘 上 
//2. 可 有 选择 性 地 将 数据 写 人 XML 文档 
XmlDocument xdoc = new XmlDocument(); // 新 建 一 个 XML 文档 对 象 xdoc 
XmlDeclaration xdecl = xdoc.CreateXxmlDeclaration("1.0", "utf - 8", "yes"); 
xdoc. AppendChild(xdec1); // 写 入 XML 文 档 标志 
XmlElement myCustomer = xdoc. CreateElement("Customers");// 写 人 

// 根 结 点 


xdoc. AppendChild(myCustomer); 


for (int i = 0; i<dt.Rows.Count; i++) // 对 每 一 行 循环 
{ XmlElement xdoc_Customer = xdoc.CreateElement("Customer"); 


for (int j = 0; j<dt.Columns.Count; j++)  // 对 每 一 列 循环 
{ XmlElement ColName = xdoc.CreateElement(dt.Columns[j]. ColumnName); 
ColName. InnerText = dt.Rows[i][j].ToString(); 
xdoc_Customer. AppendChild(ColName); 
} 
xdoc. DocumentElement. AppendChild(xdoc_Customer); 
} 
xdoc. Save( @"D:\Customers. xm1"); // 写 入 XML 文档 到 服务 器 的 D 盘 
Response.Write("XML document has generated sucessfully! "); 


finally 
{ conn. Close(); 


} 
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上 述 代码 执行 后 将 生成 两 个 XML 文档 。 

【 例 6.48】 将 XML 文档 内 容 写 入 数据 库 中 。 先 在 SQL Server Northwind 数据 库 中 创 
建 一 个 表 : create table tb_speciality(speciality_id int not null, speciality_name varchar(40))。 对 
应 的 XML 文档 D:Nspecialities. xml 的 代码 为 ; 


<?xml version= "1.0" encoding = "utf - 8"?> 
< Specialities > 
< speciality> 
< speciality id> 100</speciality_ id> 
< speciality_name > 计算 机 软件 与 理论 </speciality name> 
</speciality> 
< speciality> 
< speciality id>101</speciality id> 
< speciality_name > 计算 机 应 用 技术 </speciality_name> 
</speciality> 
< Speciality> 
< speciality_id> 102 </speciality id> 
< speciality_name > 通信 工程 </speciality_name> 
</speciality> 
</specialities> 


下 面 代码 中 给 出 了 两 种 处 理 方式 : 


using System; 

using System. Data; 

using System. Web; 

using System. Web. UI; 

using System. Data. SqlClient; 

using System. Xml; // 必 须 引用 此 命名 空间 


public partial class Read fromXML : System. Web. UI. Page 
{ protected void Page_Load(object sender, EventArgs e) 

{ string conStr = "Server= (local);database= northwind; Uid = sa;Pwd= docman"; 
string mysql = "SELECT speciality_id, speciality name FROM tb_speciality"; 
SqlConnection conn = new SqlConnection(conStr); 
conn. Open( ); 
try 
{ SqlDataAdapter da = new SqlDataAdapter(mysql, conn); 

DataSet ds = new DataSet(); 
da.Fill(ds, "tb_speciality"); 
DataTable dt = ds.Tables["tb speciality"]; 


//1. ReadXml 方法 可 直接 将 XML 中 的 所 有 数据 读 和 人 DataTable 

// 此 处 的 xML 文档 放 在 服务 器 的 D 盘 上 ,如 放 在 网 站 中 的 某 位 置 

// 用 dt.ReadXm](Server. MapPath(~/tb_speciality. xml")); 

dt. ReadXxm] (@"D:\tb_speciality. xml1"); 

SqlCommandBuilder objCB = new SqlCommandBuilder(da); // 连 接 数 据 库 

da. Update(ds, "tb_speciality"); // 更 新 数据 库 

Response. Write( "Write Data from XML to Database has completed sucessfully! "); 
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//2. 可 有 选择 性 地 将 XML 文档 中 的 数据 写 人 数据 库 
XmlDocument xdoc = new XmlDocument(); 

xdoc. Load(@"D:\tb_speciality. xml");// 加 载 XWL 文 档 到 内 存 
XmlElement spe = xdoc.DocumentElement;// 得 到 整个 XML 文档 


for (int i = 0; i< spe.ChildNodes.Count; i++)// 对 所 有 子 结 点 循环 
{ XmlNode my spe = spe.ChildNodes[i]; 


int spe_id = Convert.ToInt32(my_spe.ChildNodes[0].InnerText); 
string spe name = my_spe.ChildNodes[1].InnerText; 


DataRow newSpeciality = dt. NewRow();// 定 义 一 条 新 的 行 记录 
newSpeciality["speciality id"] = spe_id; 
newSpeciality["speciality name"] = spe_name; 

dt. Rows. Add( newSpeciality); 


//SqlCommandBuilder objCB = new SqlCommandBuilder(da); 
da. Update(ds, "tb_speciality");// 写 人 数据 库 


} 
Response. Write( "Write Data from XML to Database has completed sucessfully! "); 


finally 


conn. Close( ); 


【 例 6.49】 将 golf. xml 文件 按照 golf. xsl 文件 的 样式 要 求 转换 输出 到 浏览 器 上 。 最 
终结 果 如 图 6-27 所 示 。Golf. xml 文件 内 容 为 : 


Microsoft Internet Explorer =l9lx| 


Golfers: 

Heedy Wahlin 

Skill: excellent 。 Handicap: 10 Clubs: TaylorMade 
Favorite Courses 

City: Staie: Course: 

Pinetop A Pinetop Lakes CC 
Phoenix A Ocotilo 

Snowflake AZ Silver Creek 

Dan Wahlin 

Skill: moderate Handicap: 12 Clubs: TaylorMade 
Favorite Courses 

City: State: Course: 

Pinetop AZ Pinetop Lakes CC 
Pinetop 他 White Mountain CC 
Springville UT Hobble Creek 


EE3 


图 6-27 XML 文档 的 转换 输出 结果 
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<?xml version= "1.0" ?> 
<golfers> 
<golfer skill = "excellent" handicap= "10" clubs = "Taylor Made" id= "1111"> 
<name> 
<firstName> Heedy </firstName > 
< lastName > Wahlin </lastName> 
</name> 


< favoriteCourses> 
<course city= "Pinetop" state = "AZ" name = "Pinetop Lakes CC"/> 


"Phoenix" state = "AZ" name = "Ocotillo"/> 
Snowflake" state = "AZ" name = "Silver Creek"/> 


< course cit: 


<course city= 
</favoriteCourses> 
</golfer > 
< golfer skill = "moderate" handicap = "12" clubs = "Taylor Made" id = "2222"> 
<name> 
<firstName> Dan </firstName> 
< lastName > Wahlin </lastName > 
</name> 
< favoriteCourses> 
<course city= "Pinetop" state = "AZ" name = "Pinetop Lakes CC"/> 
< course city= "Pinetop" state = "AZ" name = "White Mountain CC"/> 
< course city= "Springville" state = "UT" name = "Hobble Creek"/> 
</favoriteCourses > 
</golfer> 
</golfers> 


Golf. xsl 文件 内 容 为 : 


<?xml version= "1.0" ?> 
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version= "1.0"> 
<xsl:output indent = "yes" method = "html"/> 
<xsl:template match = "/"> 
< html >< head> 
< style type = "text/css"> 
.blackText {font - family:arial;color: 并 000000;} 
.largeYellowText {font - family:arial;font - size:18pt; color: # ffff00;} 


.largeBlackText {font ~ family:arial;font ~- size:14pt;color: #000000;} 
.borders {border - left:1px solid #000000; 
border ~ right:1px solid #000000; 
border ~ top:1px solid #000000; 
border - bottom:1px solid #000000;} 
</style></head> 
<body bgcolor = " 井 ffffff"> 
< span class = "largeBlackText"> <b> Golfers: </b> </span> <p/> 
<xsl:apply — templates/> 
</body> 
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</html > 
</xsl:template> 
<xsl:template match = "golfers"> 
<xsl:apply- templates/> 
</xsl:template> 


<xsl:template match= "golfer"> 
<table class = "borders" border = "0" width= "640" cellpadding = "4" 
cellspacing = "0" bgcolor = "#efefef"> 
<xsl:apply — templates select = "name"/> 
<tr class = "blackText"> 
<tdwidth="12%" align= "left"> <b> Skill: </b></td> 
<tdwidth="12%" align= "left"> <xsl:value — of select = "@skill"/></td> 
<tdwidth="12%" align= "left"><b> Handicap: </b> </td> 
<tdwidth="12%" align= "left"> <xsl:value- of select="@handicap"/> </td> 
<tdwidth="12%" align= "left"><b>Clubs: </p> </td> 
<tdwidth="40%" align= "left"> <xsl:value- of select ="@clubs"/> </td> 
</tr> 
<tr><td colspan= "6"> &#xa0;</td> </tr> 
<tr class = "blackText"> <td colspan = "6" class = "largeBlackText"> 
Favorite Courses </td></tr> 
<tr><td colspan= "2"><b>City: </b> </td> 
<td colspan= "2"> <b>State: </b> </td> 
< td colspan = "2"> <b> Course: </b> </td> </tr> 
<xsl:apply — templates select = "favoriteCourses"/> 
</table> <p/> 
</xsl:template> 


<xsl:template match = "name"> 
<tr><tdcolspan= "6" class = "largeYellowText" bgcolor = "#02027a"> 
<xsl:value— of select = "firstName"/> &# xa0;< xsl:value — of select = "lastName"/> 
</td> </tr> 
</xsl:template> 


<xsl:template match = "favoriteCourses"> 
<xsl:apply— templates/> 
</xsl:template> 
<xsl:template match= "course"> 
<tr class= "blackText"> 
<td colspan= "2" align= "left"> 
<xsl:value- of select = "@city"/> 
</td> 
<td colspan = "2" align = "left"> <xsl:value— of select = "@state"/> </td> 
<td colspan = "2" align= "left"> <xsl:value— of select ="@name"/> </td> 
</tr> 
</xsl:template> 
</xsl:stylesheet > 


Golf. aspx. cs 文件 内 容 : 
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using System; 

using System. Data; 

using System. Web; 

using System. Web. UI; 

using System. Web. UI. WebControls; 
using System. Xml; 


using System. Xml. Xsl; // 必 须 使 用 的 命名 空间 
using System. Xm]. XPath; // 必 须 使 用 的 命名 空间 


public partial class xslt_golf : System. Web. UI. Page 
protected void Page Load(object sender, EventArgs e) 
{ string xmlPath = Server.MapPath("golf.xml"); 
string xslPath = Server.MapPath("golf.xsl"); 
//Instantiate the XPathDocument Class 
XPathDocument doc = new XPathDocument(xmlPath); 


//Instantiate the XslTransform Class 
XslTransform transform = new XslTransform(); 
transform, Load(xslPath) ; // 加 载 xSL 文件 


//Custom format the indenting of the output document by using an 
//XmlTextWriter 

XmlTextWriter writer = new XmlTextWriter(Response. Output); 
writer. Formatting = Formatting. Indented; 

writer. Indentation = 4; 

transform. Transform(doc, null, writer); ”// 进 行 转 换 输出 


思考 练习 题 


1. 熟悉 ASP. NET 的 各 种 常用 控件 。 

2. 简 述 GridView 控件 、DataList 控件 和 Repeater 控件 的 优 缺 点 及 它们 分 别 使 用 的 
场合 。 

3. 写 一 个 ASP. NET 页 面 ,该 页 面 使 用 连接 对 象 连接 Northwind 数据 库 ,并 使 用 
GridView 控件 显示 下 面 的 信息 : 

Q@ 所 有 供应 商 的 地 址 、 所 在 城市 联系 人 姓名 和 电话 号 码 ; 

@ 所 有 雇员 的 姓名 和 地 址 , 按 年 龄 降序 显示 。 

4. 分 别 使 用 DataList 控件 和 Repeater 控件 实现 对 Northwind 数据 库 中 Products 表 的 
数据 显示 、 分 页 和 排序 。 

5. 使 用 FormView 控件 实现 对 Northwind 数据 库 中 Categories 表 的 数据 显示 ,并 且 实 
现 增加 编辑 和 添加 数据 记录 功能 。 效 果 如 图 6-28 所 示 。 
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淖 无 标题 页 - Microsoft Internet Explorer 


文件 ( 忆 ”编辑 (E) ”查看 (W) 收 诚 () 工具 (D 帮助 (中 | 
+ 有 E+ 小- 因 有 畏 侧 | 风 扫 雪 国生 类 科 关 人 迄 | 书 - 马 回 " ” 
王 二 5jj 国 http:/Wocahost:s5097/ 控 件 jex_6_15,aspx 了 可 忆 轩 到 | 链接? 


使 用 FormView 编 辑 添加 数据 


姓名 :Beverages 


描述 : ”Soft drinks, coffees, teas, beers, and ales 


el eal 


12345678 
于 
画 ”me 


图 6-28 第 5 题 的 运行 效果 
6. 请 说 出 下 列 代码 在 浏览 器 中 的 输出 形式 。 


<%@ Page Language = "C#" RutoEventWireup = "true" CodeFile = "Default2. aspx.cs" Inherits = 
"Default2" %> 
<% string hisName = "Yangking"; %> 
<html >< head runat = "server"><title> 无 标题 页 </title></head> 
<body> 
< form id = "forml" runat = "Server"> 
姓名 : < input id= "Text1" type = "text" value = "<% =myName%>" /></form> 
<script>alert('<% = myName $%>');</script> 
<script>alert('<% = hisName %>');</script> 
</body></html> 
Default2. aspx. cs: 
public partial class Default2 : System. Web. UI. Page 
{ protected string myName = "WangCL"; 
protected void Page Load(object sender, EventArgs e) 
{ myName = "WangCL"; 
} 


7. 结合 前 面 几 章 介 绍 的 知识 开发 一 个 简单 的 数据 库 应 用 系统 。 
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学 习 要 点 

(1) Ajax 的 基本 概念 及 原理 。 

(2) 基于 Ajax 框架 的 应 用 开发 原理 和 方法 。 

(3) 了 解 Silverlight 和 XAML 基础 知识 。 

(4) 掌握 Silverlight 基本 控件 及 其 应 用 。 

(5) 了 解 Silverlight 事件 处 理 。 

(6) 了 解 Silverlight 界面 布局 。 

(7) 了 解 Silverlight 数据 服务 。 

(8) 理解 Silverlight 自 定 义 控件 和 模板 及 其 应 用 。 


本 书 第 1 章 已 经 介绍 过 Ajax 技术 。 它 由 Jesse James Garrett 于 2005 年 
2 月 提出 ,但 在 这 之 前 ,实际 上 像 Google 公司 在 Google Map 中 已 经 使 用 这 
种 技术 来 处 理 相关 数据 的 查询 和 浏览 ,只 不 过 没有 给 它 以 如 此 响亮 的 名 字 。 
Ajax 是 Asynchronous Javascript and XML 的 简称 ,该 技术 的 目标 是 让 用 户 
动态 地 与 页 面 进行 交互 ,加 快 服务 器 的 响应 速度 ,减少 用 户 的 等 待 时 间 , 是 一 
种 创建 交互 式 Web 应 用 程序 的 开发 技术 。 

为 了 便于 读者 理解 Ajax 技术 的 基本 原理 ,并 学 会 应 用 Ajax 技术 ,本 章 
将 介绍 如 何 利 用 XMLHttpRequest 对 象 进行 Ajax 开发 ,实现 与 网 页 服务 器 
之 间 的 异步 数据 交换 ,随后 针对 ASP. NET 平台 下 传统 的 Web Form 程序 开 
发 和 基于 Ajax 的 Web Form 程序 开发 进行 对 比 研究 ,并 通过 具体 案例 讲解 
其 内 容 和 原理 。 

随 着 互联 网 行业 的 飞速 发 展 , 越 来 越 多 的 公司 认识 到 只 有 不 断 地 提高 企 
业 的 核心 竞争 力 和 创新 能 力 , 才 能 在 激烈 的 市 场 竞争 当中 脱颖而出 。 
Silverlight 的 横 空 出 世 为 企业 应 用 提出 了 新 的 解决 方案 ,可 轻松 构建 更 为 直 
观 、 易 于 使 用 .反应 更 迅速 并 且 可 以 脱 机 使 用 的 应 用 程序 ,并 可 帮助 企业 提供 
多 元 化 的 重要 业务 效益 ,包括 提高 销量 、 提 高 品牌 忠诚 度 、 延 长 网 站 逗留 时 
间 ,减少 频繁 的 重复 访问 、 减 少 带宽 成 本 、 减 少 支 持 求助 以 及 增强 客户 关系 
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等 。 本 章 将 对 Silverlight 技术 进行 介绍 。 


7.1 Ajax 概述 


Ajax 通过 异步 数据 交换 和 处 理 , 可 显著 提高 Web 应 用 程序 运行 效率 ,给 Web 开发 者 
带 来 了 新 的 希望 。Ajax 并 不 是 一 门 新 的 语言 或 技术 , 它 实际 上 是 几 项 技术 按 一 定 的 方式 组 
合 在 一 起 从 共同 协作 中 发 挥 各 自 的 作用 。 具 体 来 说 ,Ajax 基于 下 列 核心 技术 : 

XHTML: 对 应 W3C 的 XHTML 规范 ,目前 是 XHTML 1.0。 

CSS: 对 应 W3C 的 CSS 规范 ,目前 是 CSS 3.0。 

DOM: 这 里 的 DOM 主要 是 指 HTML DOM。 

JavaScript: 对 应 于 ECMA 的 ECMAScript 规范 。 

XML: 对 应 W3C 的 XML DOM、XSLT、XPath 等 规范 。 

XMLHttpRequest: 对 应 WHATWG (Web Hypertext Application Technology 
Working Group) 的 Web Applications 2. 0 规范 的 一 部 分 Chttp://whatwg. org/ 
specs/web-apps/current-work/)。 

Ajax 的 工作 原理 相当 于 在 用 户 和 服务 器 之 间 加 了 一 个 中 间 层 即 Ajax 引擎 ,使 用 户 操 
作 与 服务 器 响应 异步 化 。 并 不 是 所 有 的 用 户 请 求 都 提交 给 服务 器 , 像 一 些 数据 验证 和 简单 
的 数据 处 理 等 都 交 给 Ajax 引擎 自己 来 做 ,只 有 确定 需要 从 服务 器 读 取 新 数据 时 再 由 Ajax 
引擎 代为 向 服务 器 提交 请 求 。 其 应 用 程序 模型 如 图 7-1 所 示 。 


浏览 器 客户 端 浏览 器 客户 端 
用 户 界面 
用 户 界面 JavaScript CALL { 
| HTML+CSS+ 数 据 
Ajax 引擎 
HTTP 请 求 HTTP 请 求 
HTML+CSS+ 数 据 XML 数据 


Web 服 务 器 Web and/or XML 服务 器 


| 国王 | 


数据 库 服务 器 数据 库 服 务 器 


服务 器 端 服务 器 端 


传统 Web 应 用 模型 基于 Ajax 的 Web 应 用 模型 
图 7-1 Ajax 与 传统 Web 应 用 程序 模型 对 比 


Ajax 的 核心 是 JavaScript 对 象 XmlHttpRequest。 该 对 象 在 Internet Explorer 5 中 首 
次 引入 , 它 是 一 种 支持 异步 请 求 的 技术 。XmlHttpRequest 使 开发 者 可 以 使 用 JavaScript 向 
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服务 器 提出 异步 请 求 并 处 理 响 应 ,而 不 阻塞 用 户 。 
目前 实现 Ajax 技术 的 方法 主要 有 : 四 直接 基于 XMLHttpRequest 对 象 ; 四 利用 各 种 
Ajax 框架 ,简化 Ajax 开发 。 


7.2 用 XMLHttpRequest 实现 Ajax 技术 


Ajax 的 一 个 最 大 的 特点 是 无 须 刷 新 页 面 便 可 向 服务 器 传输 或 读 写 数据 (又 称 无 刷新 更 
新 页 面 ) ,这 一 特点 主要 得 益 于 XMLHTTP 组 件 中 的 XMLHttpRequest 对 象 。 最 早 应 用 
XMLHTTP 的 是 微软 IE(IE 6.0 以 上 ), 它 允许 开发 人 员 在 Web 页 面 内 部 使 用 XMLHTTP 
ActiveX 组 件 扩 展 自身 的 功能 ,开发 人 员 可 以 不 用 从 当前 的 Web 页 面 导航 而 直接 传输 数据 
到 服务 器 上 或 者 从 服务 器 取 数 据 。 在 这 种 情况 下 .XMLHttpRequest 对 象 相 当 于 起 到 了 
图 7-1 中 Ajax 引擎 的 作用 ,利用 该 对 象 减 少 了 无 状态 连接 的 痛苦 ,还 可 以 排除 下 载 元 余 
HTML, 从 而 提高 服务 器 的 响应 速度 。 其 他 浏览 器 Mozilla、Firefox、Opera、Safari 等 也 都 支 
持 XMLHttpRequest 对 象 。 

XMLHttpRequest 是 Ajax 开发 的 基础 ,体现 了 异步 调用 的 核心 。XMLHttpRequest 
对 象 的 方法 和 属性 分 别 如 表 7-1 和 表 7-2 所 示 。 


表 7-1 XMLHttpRequest 对 象 方法 


方 法 描 述 
abort() 停止 当前 请 求 
getAllResponseHeaders() 返回 完整 的 headers 字符 串 
getResponseHeader("headerLabel") 返回 单个 的 header 标签 字符 串 
open("method","URL"[ ,syncFlag[ ,"userName" 设置 请 求 的 方法 .目标 URL 和 其 他 参数 
[,"password"]]]) 
send(content) 发 送 请 求 
setRequestHeader("label” , "value") 设置 header 并 和 请 求 一 起 发 送 


表 7-2 XMLHttpRequest 对 象 属性 


属 性 描 述 
onreadystatechange 状态 改变 的 事件 触发 器 
readyState 对 象 状态 (integer): 0 一 未 初始 化 ; 1= 读 取 中 ; 2= 已 读 取 ; 3 交互 中 ; 4 一 
完成 
responseText 从 服务 器 返回 的 数据 文本 
responseXML 从 服务 器 返回 兼容 DOM 的 XML 文档 对 象 
status 服务 器 返回 的 状态 码 。 如 : 404 表示 “文件 未 找到 ”、200 表示 “成 功 ” 
statusText 服务 器 返回 的 状态 文件 信息 


用 XMLHttpRequest 进行 Ajax 开发 的 基本 步骤 主要 包括 发 送 XMLHttpRequest 对 象 
请 求 和 获取 响应 信息 进行 数据 处 理 两 个 步骤 。 
使 用 XMLHttpRequest 对 象 发 送 请 求 的 基本 步骤 是 : 
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(1) 创建 XMLHttpRequest 对 象 。 

(2) 指定 处 理 函 数 : 给 XMLHttpRequest 对 象 的 onreadystatechange 属性 赋值 ,指示 
哪个 函数 处 理 XMLHttpRequest 对 象 状 态 的 改变 。 

(3) 指定 请 求 的 属性 。open 方法 的 3 个 参数 分 别 指定 将 发 送 请 求 的 方法 (通常 是 GET 
或 POST) .目标 资源 URL 串 以 及 是 否 异 步 请 求 。 

(4) 发 送 请 求 到 服务 器 : send 方法 把 请 求 传送 到 指定 的 目标 资源 ,send 方法 接收 一 个 
参数 ,通常 是 一 个 串 或 DOM 对 象 。 这 个 参数 会 作为 请 求 体 的 一 部 分 传送 到 目标 URL。 向 
send 方法 提供 参数 时 ,要 确保 open 中 指定 的 方法 是 POST。 如 果 没 有 数据 要 作为 请 求 体 的 
一 部 分 发 送 , 则 使 用 null。 

XMLHttpRequest 对 象 在 大 部 分 浏览 器 上 已 经 实现 ,而 且 拥 有 一 个 简单 的 接口 允许 数 
据 从 客户 端 传递 到 服务 端 , 但 并 不 会 打 断 用 户 当 前 的 操作 。 使 用 XMLHttpRequest 传送 的 
数据 可 以 是 任何 格式 的 ,虽然 从 名 字 上 建议 是 XML 格式 的 数据 。 

【 例 7.1】 该 例 代 码 演示 了 利用 XMLHttpRequest 对 象 获取 远程 数据 并 显示 结果 的 整 
个 过 程 。 


<HTML > 
<HEAD>< title> Welcome </title> 
< script language = "javascript"> 
Var vxXMLHttpRequest; 
function CreateXMLHttpRequest(){ // 创 建 XMLHttpRequest 对 象 , 需 考虑 浏览 器 兼容 性 
if (window. XMLHttpRequest){ // Mozilla、Firefox、Safari 等 浏览 器 
VXMLHttpRequest = new XMLHttpRequest() 7 
if (vXMLHttpRequest. overrideMimeTYpe){ 
VXMLHttpRequest. overrideMimeType( "text/xml" ); 
} 
jelse if (window. ActiveXObject){ // 亚 浏 览 器 
try{ 
VvXMLHttpRequest = new RctiveXObject("Msxm12. XMLHTTP" ) ; 
} 
catch(e){ 
VXMLHttpRequest = new ActiveXObject("Microsoft. XMLHTTP") 
} 
} 
if (!vXMLHttpRequest){window.alert("Browser not support XMLHttp— 
Request!");} 
return vXMLHttpRequest; 
} 
function ExcuteWelcome(vName){ 
vXMLHttpRequest = CreateXMLHttpRequest(); 
VXMLHttpRequest. onreadystatechange = Excute Callback; // 指 定 处 理 函 数 
var url = "WelcomeResult.aspx?Name= ”+ vName; 
VXMLHttpRequest. open("GET",url); // 设 置 请 求 方法 和 目标 
vEMLHttpRequest. send( nul11); // 发 送 请 求 
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} 
function Excute Callback(){ 
if (vxMLHttpRequest. readyState == 4){ // 对 响应 数据 进行 处 理 
证 (vxMLHttpRequest. status == 200){ // 信 息 返 回 成 功 
var s = vXMLHttpRequest. responseText; 
MyResult. innerHTML = s; // 显 示 数据 
} 
} 
} 
</script > 
</HEAD> 
<body> 


< form id= "Forml" method= "post" runat = "server"> 
<div> 请 输入 您 的 姓名 : </div> 
< input id = "username" type = "text" size= "13"> 
< input type = "button" value = " 单 击 " onclick = " ExcuteWelcome( document. 
getElementById( 'username') .value)"> 
<div id= "MyResult"></div> 
</form> 
</body> 
</HTML> 


以 上 代码 实现 在 文本 框 输入 姓名 , 单 击 button 按钮 后 ,XMLHttpRequest 异步 访问 
WelcomeResult. aspx 获取 问候 语 并 显示 。 其 中 ,函数 CreateXMLHttpRequest() 根 据 不 同 
浏览 器 版 本 ,完成 XMLHttpRequest 对 象 创建 工作 ; 函数 ExcuteWelcome() 首 先 创建 
XMLHttpRequest 对 象 ,然后 通过 onreadystatechange 属性 指定 当 属 性 readyState 状态 发 
生 改 变 时 由 函数 Excute_Callback() 进 行 处 理 。 

页 面 WelcomeResult. aspx 仅 根 据 调用 的 参数 返回 一 个 字符 串 ,在 . NET 环境 中 其 页 面 
的 codebehind 代码 为 : 


Private void Page_Load(object sender，System. EventArgs e) 

Response. Clear( ); 

string TempName = Request. QueryString["Name"]; 

if (TempName != null) 

{ try 
{ Response. Write(TempName + ", Wellcome to Ajax's world!"); 
} 
catch { } 


} 
Response. End( ); 


其 运行 效果 如 图 7-2 所 示 。 
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ELE Microsoft Internet Explorer 
| 文件) ”编辑 (E) ”查看 (VW) 收 训 (&) ”工具 (D 帮助 
| + 有 -了 -固有 四 人身 | 网 于 国 收 天 尖 状 休 渤 


请 输入 您 的 姓名 


二 
谭 明 红 , Wellcome to Ajax's world! 


7-2 ”Ajax 实例 运行 效果 


XMLHttpRequest 还 可 用 异步 方式 调用 网 络 Web 服务 ,调用 远程 服务 器 中 已 经 编写 好 
的 方法 ,实现 各 种 功能 ,仍旧 包括 发 送 XMLHttpRequest 对 象 请 求 和 获取 响应 信息 进行 数 
据 处 理 两 个 步骤 。 

远程 天 气 预报 Web 服务 免费 提供 了 包括 340 多 个 国内 主要 城市 和 60 多 个 国外 主要 城 
市 三 天 内 的 天 气 预报 数据 ,数据 来 源 于 中 国 气象 局 ,每 2. 5 小 时 更 新 一 次 ,准确 可 靠 。 其 接 
入 口 为 http://webservice. webxml. com. cn/ WebServices/ WeatherWebService. asmx, 单 击 
该 链接 可 查看 该 天 气 预 报 Web 服务 所 提供 的 接口 调用 介绍 ,如 图 7-3 所 示 。 下 例 将 通过 该 
Web 服务 提供 的 getWeatherbyCityName 方法 来 获取 某 城 市 的 天 气 情况 。 


We com. cn Me web, /pom oo en Em Aa B240 $1 ome Wnt 60 2 RNIN Et 
[ep i nt Ss 


a 


入 作 。 下 式 是 以， 请 和 大 关 
* gotSupoortchy 
和 村 要 Web Services 去 和 国外 四 市 项 才 全 
和 和 抽 :byprownceNtame 可 定 6hH0ERS90 泊 的 ， 鞭 AL 全 过 硬币， 送 风 生 :一 一 等 纪 Sirmo0 的 为 直入 (8 才 人) 


oersupoonnataset 


入 天 所 伯 术 Web Services 雪 和 的 基 、 罗 由 外 和 全 和 直人 
8 下， Dataset » Dataset Tabhes(0) SAE, Oata5et Tes) aoERA Nr, alaset Tabies(0) RomsG em mp 0 Dataset Tabiest1) Romsto nem"zonetn") 上 
ee(0) ip ~ Ip， zone -下 省 了 1 Tablesl1): 四 主 训 ， 2onelD ~ GTabdes(0jiog| 本 ，Are3 天 我 E，Ne2Code ~ 和信。 

aetsapeonproviac 

本 大气 卫生 Web servicer 雪 的 光 、 国 内 外 春明 人生 
外: 天 用 本 :一 一 失手 Solng0， 站 天 各 称 - 
etweatherby tnome 

eh inane de a 

各 入 本 1 市 有 商人 焉 ( 罗 他 为 上 省 )， 的 :上古 开 58367， 多 有 加 市 和 机制 代 并 [于 dgetSupportCy 大 oetSupportData5et 名 有) 近 回 所: 

itn ro Bret, HE 了 人 和 全 让 生生 全 和 wamara， 


ste) 
Snol0) Sng4); 才 a 
天 所 和 生活 扩 隐 。Stng(1 攻 到 Snng(16): 入 站 气量 角 忠 ， 内 5 击 册 力 ， 轩 一， 加 寻 二 ”Serng(17) 到 Shnno21); 第 = 开交 所 生机 名， 内 名 力 ， 岂 本 一 ， 罗 二 Sing(22) 可 生机 
要 天 同村 富生 和 VE 《所 坟 大、 中、 小 天气 国 全 用 于 引 天 气 光宏 Web Seryces 芋 亲本 v6 XSP -net 2.0) 


oetweatherbyc mamebre 


作 二 市 寺 区 条 了 二 扫 各 丰 来 = 天 内 天 气 生 史 、 测 在 的 天 所 中 、 天 气 训 生 人 《For 由 风 户 ) 
最 册 oetWeatherbyCRyNamer A 各; theused = 于 天 ID 


图 7-3 天 气 预 报 Web 服务 所 提供 的 各 接口 介绍 


【 例 7.2】 该 例 代码 演示 了 利用 XMLHttpRequest 对 象 连接 远程 天 气 预报 Web 服务 
接口 并 显示 城市 天 气 的 过 程 。 
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< htm]l >< head ><title> 重 庆 的 天 气 预报 </title> </head> 
< script type = "text/javascript"> 
var xmlhttp= null; 
window. onload = getChongqing;// 浏 览 器 加 载 网 页 完毕 后 执行 onload 事件 ,调用 getChongqing 函数 
function getChongqing( ){ // 获 取 重 庆 天 气 信息 
// 判 断 浏览 器 类 型 ,根据 不 同 的 浏览 器 , 创建 XMLHttpRequest 对 象 xmlhttp 
if (window. XMLHttpRequest) { 
xmlhttp = new XMLHttpRequest( ); 
} 
else if (window. ActiveXObject) { 
xmlhttp = new ActiveXObject("Microsoft. XMLHTTP" ); 
} 
else { 
xmlhttp = new ActiveXObject("Msxml2. XMLHTTP" ) ; 
} 
xmlhttp. open ( " GET"," http://www. webxml. com. cn/WebServices/WeatherWebService. asmx/ 
getWeatherbyCityName?theCityName = 重庆 ", true); 
xmlhttp. send(null); // 发 送 Web 服务 请 求 
xmlhttp, onreadystatechange = stateChange; ”// 当 XMLHttpRequest 对 象 xmlhttp 的 状态 变换 时 ,就 
执行 stateChange 函数 . 
function stateChange( ) 
{ 
证 (xmlhttp.readyState== 4) // 判 断 xmlhttp 对 象 的 返回 状态 
{ 
if(xmlhttp. status == 200|| xmlhttp. status == 0) // 如 果 是 404, 说 明 未 找到 服务 文件 .0 是 专 
门 为 火狐 和 谷歌 浏览 器 保留 的 , 它 说 明 本 地 运行 成 功 的 情况 . 
{ 


var data = xmlhttp. responseXML;  // 获 取 所 有 返回 的 数据 

document. getElementById( "nol"). firstChild. nodeValue = data. getElementsBYTagName(" string") 
[5].firstChild. nodeValue;”// 显 示 当 前 温度 
document. getElementById( "no2"). firstChild. nodeValue = data. getElementsBYTagName(" string") 
[6].firstChild. nodeValue; // 显 示 当 前 天 气 情况 

} 
} 
|} 
</script > 
<body> 
温度 : < span id = "nol"></span> 
天 气 : < span id = "no2" ></span> 
</body> 
</html ></html > 


上 述 代 码 中 可 将 重庆 换 成 其 他 城市 名 从 而 实现 不 同城 市 的 天 气 预 报 。 通 过 xmlhttp 的 
open 方法 连接 天 气 预 报 Web 服务 ,xmlhttp 的 send 方法 则 主要 是 向 该 Web 服务 发 出 处 理 
请 求 。stateChange 函数 体 部 分 实现 对 返回 的 XML 文档 格式 的 天 气 数据 信息 进行 处 理 ,这 
里 主要 是 返回 当前 所 选 地 区 的 天 气 信息 。 根 据 getWeatherbyCityName 方法 可 知 ,传人 参 
数 theCityName 的 具体 值 后 可 以 查询 获得 该 城市 未 来 三 天 内 天 气 情况 、 现 在 的 天 气 实 况 、 
天 气 和 生活 指数 等 信息 ,如 图 7-4 所 示 ,以 重庆 为 例 。 
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图 7-4 具体 城市 天 气 情况 


从 图 7-4 可 知 ,调用 该 天 气 预报 Web 服务 后 玉 
返回 的 天 气 信息 以 XML a 共有 23 a 
个 string 结 点 ,可 放 在 一 个 string 数组 中 ,图 中 每 
0 去 /string 之 中 间 的 元 素 就 是 数组 图 7-5 示例 运行 结果 (重庆 实时 天 气 情况 ) 

一 个 元 素 , 可 根据 想 要 显示 的 天 气 信息 来 确定 网 页 的 设计 。 在 浏览 器 中 运行 例 7.2 网 页 
pi 7-5 所 示 ( 代 码 中 略 去 了 相关 显示 的 样式 ) 。 


7.3 传统 Web Form 和 基于 Ajax 的 Web Form 应 用 对 比 


传统 的 Web Form 应 用 允许 客户 端 填写 表单 , 当 提 交 表单 时 就 向 Web 服务 器 发 送 一 个 
请 求 。 服 务 器 接收 并 处 理 传 来 的 表单 ,然后 返回 一 个 生成 的 完整 网 页 ,但 这 个 做 法 不 仅 耗 费 
带宽 ,而且 用 户 响 应 速度 慢 。 因 为 表单 提交 前 的 网 页 和 表单 提交 后 返回 的 网 页 往往 区 别 不 
大 ,但 每 次 都 需 将 生成 的 完整 网 页 返回 到 客户 端 浏览 器 。 

与 此 不 同 ,基于 Ajax 的 Web Form 应 用 可 以 仅 向 服务 器 发 送 并 取 回 必须 的 数据 ,并 在 
客户 端 采用 JavaScript 处 理 来 自 服务 器 的 回应 。 因 为 在 服务 器 和 浏览 器 之 间 交 换 的 数据 大 
量 减 少 ,服务 器 响应 速度 快 ,用 户 体验 更 好 。 

【 例 7.3】 该 例 代码 演示 了 传统 Web 应 用 和 基于 Ajax 的 Web Form 应 用 的 异同 ,在 
VS 2010 环境 通过 添加 例 7. 2 的 天 气 预 报 Web 服务 来 实现 天 气 查询 。 为 了 查看 实现 效果 ， 
在 网 页 上 放置 了 一 幅 较 大 的 图 片 。 

传统 的 Web Form 应 用 ,每 次 单 击 获取 天 气 按钮 就 都 会 向 Web 服务 器 发 送 一 次 请 求 ， 
服务 器 接收 请 求 处 理 后 ,会 返回 一 个 生成 的 完整 网 页 ,此 时 明显 看 到 整个 图 片 被 较 缓慢 地 刷 
新 一 次 ,导致 对 用 户 界 面 的 响应 变 长 。 前 台 aspx 代码 如 下 : 


5C/8C 


12 月 21 日 外 十 全 


<$ @ Page Language = "C 井 "RutoEventWireup = "true" CodeBehind = "get weather by web form. aspx. 
cs" Inherits= "Shen. get weather by web form" %> 
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<! DOCTYPE html PUBLIC " — //W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 
< htm]l xmlns = "http://www. w3.org/1999/xhtml" > 
<head runat = "server"> <title> 传 统 的 Web 应 用 </title> </head> 
<body> 
< form id = "forml" runat = "server"> 
<div> 
城市 : < asp:TextBox ID = "TextBoxl"”runat = "server"></asp:TextBox> 
<br /> <hbr 入 
温度 : < asp:TextBox ID = "TextBox2" runat = "server"></asp:TextBox> 
<br /> <br 人 > 
天 气 : <asp:TextBox ID = "TextBox3" runat = "server"></asp:TextBox> 
<br /> <br /> 
</div> 
<asp:Button ID = "Button1" runat = "server" onclick = "Button1_Click" Text = "GetWeather" /> 
</form> 
< img alt = "" src= "Sandstone Patterns. jpg" style = "width: 900px; height: 500px" /> 
</body> 
</html > 


后 台 .es 代码 如 下 : 


protected void Button1_Click(object sender, EventArgs e) 
{String []xdoc; // 建 立 保存 Web 服务 返回 信息 的 数组 
MyWeatherWebservice. WeatherWebService myWeather = new MyWeatherWebser vice. 
WeatherWebService( ); // 新 建 Web 服务 实例 
xdoc = myWeather. getWeatherbyCityName(" 重 庆 "); // 传 人 参数 为 "重庆 ", 向 数组 返回 重庆 


的 天 气 情况 
TextBoxl. Text = xdoc[1]; // 在 文本 框 中 显示 城市 
TextBox2.Text = xdoc[5]; // 在 文本 框 中 显示 温度 
TextBox3.Text = xdoc[6]; // 在 文本 框 中 显示 天 气 


而 基于 Ajax 的 Web Form 应 用 ,利用 其 核心 XMLHttpRequest 对 象 ,可 在 不 更 新 整个 
页 面 的 前 提 下 维护 数据 ,使 得 Web 应 用 更 为 迅速 地 回应 用 户 请 求 ,避免 了 在 网 络 上 发 送 那 
些 无 须 改 变 的 信息 。 前 台 aspx 代码 如 下 : 


<% @ Page Language = "C#" AutoEventWireup = "true" CodeBehind = "get weather by Ajax. aspx. 
cs" Inherits = "Shen.get _ weather by Ajax" %> 

<! DOCTYPE html PUBLIC " ~ //W3C//DTD XHTML 1. 0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 

< htm]l xmlns = "http://www. w3.org/1999/xhtml" > 

<head runat = "server"> 
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<title> 基 于 Ajax 框架 的 应 用 </title> 
</head> 
<body> 
< form id = "forml" runat = "server"> 
<asp:ScriptManager ID = "ScriptManager1”runat = "server"> 
</asp:ScriptManager > 
<asp:UpdatePanel ID = "UpdatePanell" runat = "server"> 
< ContentTemplate> 
城市 : <asp:TextBox ID = "TextBoxl" runat = "server"></asp:TextBox> 
<br/> <br/> 
温度 : <asp:TextBox ID = "TextBox2" runat = "server"></asp:TextBox> 
<br/> <br/> 
天 气 : <asp:TextBox ID= "TextBox3" runat = "server"></asp:TextBox> 
<br/> <br/> 
< asp: Button ID = "Buttonl" runat = " server" onclick = "Buttonl Click" Text = 
"GetWeather" /> 
</ContentTemplate > 
</asp:UpdatePanel > 
</form> 
< img alt ="" src= "Sandstone Patterns. jpg" style = "width: 900px; height: 500px" /></p> 
</body> 
</html > 


其 中 的 ScriptManager 控件 ,管理 支持 Ajax 的 ASP. NET 网 页 的 客户 端 脚本 。 必 须 在 页 面 
上 使 用 ScriptManager 控件 ,才能 启用 ASP. NET 的 Ajax 功能 ,默认 情况 下 ,ScriptManager 
控件 会 向 页 面 注册 Ajax Library 的 脚本 ,这 将 使 客户 端 脚本 能 够 使 用 类 型 系统 扩展 并 支持 
部 分 页 呈现 ,允许 单独 刷新 页 面 上 的 区 域 而 无 需 回 发 和 Web 服务 调用 等 功能 。 

当 页 包含 一 个 或 多 个 UpdatePanel 控件 时 ,ScriptManager 控件 将 管理 浏览 器 中 的 部 分 
页 呈现 ,该 控件 与 页 生命 周期 进行 交互 ,以 更 新 位 于 UpdatePanel 控件 内 的 部 分 页 ,而 不 需 
要 自 定义 客户 端 脚本 。 使 用 UpdatePanel 控件 可 生成 功能 丰富 的 、 以 客户 端 为 中 心 的 Web 
应 用 程序 。 即 通过 使 用 UpdatePanel 控件 ,可 以 刷新 页 的 选 定 部 分 ,而 无 须 使 用 回 发 刷新 整 
个 页 面 。 

可 以 通过 声明 方式 向 UpdatePanel 控件 添加 内 容 , 也 可 以 在 设计 器 中 通过 使 用 
Content-Template 属性 来 添加 内 容 。 当 首次 呈现 包含 一 个 或 多 个 UpdatePanel 控件 的 页 
时 ,将 呈现 UpdatePanel 控件 的 所 有 内 容 并 将 这 些 内 容 发 送 到 浏览 器 。 在 后 续 异 步 回 发 中 ， 
即 可 以 更 新 各 个 UpdatePanel 控件 的 内 容 。 更 新 将 与 面板 设置 .导致 回 发 的 元 素 以 及 特定 
于 每 个 面板 的 代码 有 关 。 

因为 也 是 返回 某 个 城市 的 温度 和 天 气 的 信息 , 故 后 台 代 码 与 传统 的 WebForm 应 用 相 
同 ,两 种 方式 的 运行 结果 也 相同 ,但 运行 效率 大 不 一 样 ,如 图 7-6 所 示 。 


391 
第 7 章 Ajax 和 Silverlight 4 技 


城市 ， 苯 庆 
温度 ，|15C20C 


天 气 ，|10 月 26 日 多 云 转 阴 


GetWeather 


7.4 Silverlight 4 概述 


Silverlight 是 微软 开发 的 一 种 可 以 设计 、 开 发 和 发 布 有 多 媒体 体验 与 富 互 联网 应 用 程 
序 RIA(Rich Internet Application) 的 网 络 交互 程序 ,是 提升 互联 网 用 户 体验 的 一 项 重要 
Web 技术 。Silverlight 技术 的 出 现 将 桌面 丰富 的 用 户 界 面体 验 带 到 了 互联 网 。Silverlight 
整合 了 一 系列 工具 、 技 术 和 服务 ,使 创建 RIA 的 工作 更 加 轻松 ,不 再 受 限 于 浏览 器 所 能 实现 
的 功能 ,而 是 可 以 实现 新 的 RIA 平台 所 支持 的 各 种 交互 行为 ,是 一 种 跨 浏览 器 、 跨 平台 的 
.NET Framework 实现 ,用 于 为 Web 生成 和 提供 下 一 代 媒 体 体验 和 丰富 的 交互 式 应 用 程 
序 。Silverlight 统一 了 服务 器 、Web 和 桌面 的 功能 ,统一 了 托管 代码 和 动态 语言 .声明 性 编 
程 和 传统 编程 以 及 Windows Presentation Foundation(WPF) 的 功能 。 它 以 浏览 器 的 外 挂 
元 件 方式 提供 Web 应 用 程序 中 多 媒体 与 高 互动 性 前 台 应 用 程序 的 解决 方案 ,同时 它 是 微软 
用 户 体验 策略 中 的 一 环 ,也 是 微软 试图 将 美术 设计 和 程序 开发 人 员 的 工作 明确 切 分 而 使 其 
透 过 协同 合作 开发 应 用 程序 的 尝试 之 一 。 


7.4.1 什么 是 Silverlight 


Silverlight 的 原名 叫 WPF/E, 它 是 微软 推出 的 一 个 跨 浏 览 器 、 跨 平台 的 互联 网 应 用 程 
序 开发 技术 ,具有 极其 优秀 的 矢量 图 形 .动画 和 多 媒体 支持 的 能 力 , 内 置 丰富 的 网 络 通信 支 
持 功能 。Silverlight 4 具有 如 下 功能 : 

(1) WPF 和 XAMIL。Silverlight 包含 WPF 的 一 个 子 集 ,大 大 地 扩展 浏览 器 中 用 于 创 
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建 UI 的 元 素 。 

(2) JavaScript 扩展 。Silverlight 对 JavaScript 进行 了 扩展 ,提供 对 WebUI 更 加 强大 的 
控制 能 力 和 与 WPF 元 素 协同 工作 的 能 力 。 

(3) 跨 浏览 器 、 跨 平台 支持 。 一 个 Silverlight 程序 可 以 在 大 多 数 的 浏览 器 上 运行 ,这 样 
我 们 开发 Silverlight 应 用 的 时 候 就 不 用 考虑 它 将 运行 在 什么 平台 上 。 

(4) 可 与 现 有 应 用 程序 集成 。Silverlight 可 无 缝 地 与 现 有 的 JavaScript 和 ASP. Net 
Ajax 代码 集成 ,并 作为 已 创建 功能 的 一 个 重要 的 补充 。 

(5) 采用 . NET 编程 模型 和 相关 的 开发 工具 。 我 们 可 以 采用 托管 的 JScript 和 
IronPython 来 编写 Silverlight 应 用 程序 ,也 可 以 使 用 C# 和 Visual Basic 来 完成 。 你 还 可 
以 使 用 Visual Studio 这 样 的 工具 来 创建 Silverlight 应 用 程序 。 

(6) LINQ。Silverlight 支持 LINQ, 它 可 让 你 在 . NET 中 通过 更 加 直观 的 和 强 类 型 的 
对 象 来 访问 数据 。 

目前 ,Silverlight 的 稳定 版 本 Silverlight 5. 0 已 经 在 2011 年 12 月 9 日 正式 发 布 。 它 在 
兼容 以 前 版 本 功能 的 前 提 下 ,也 加 入 了 如 支持 GPU 加 速 图 像 压缩 、 自 带 3D graphics、 自 带 
远程 控制 .加强 Visual Studio 2010 的 用 户 界 面 自动 化 测试 .文字 检 错 系统 等 新 功能 , 极 大 地 
方便 了 开发 者 的 使 用 。 


7.4.2 Silverlight 4 开发 环境 部 署 


通常 来 说 ,Silverlight 4 的 开发 环境 需要 包含 以 下 几 个 开发 工具 : 

(1) Visual Studio 2010 或 者 Visual Web Developer 2010 Express ,在 安装 过 程 中 ,. Net 
Framework 4 会 同时 被 安装 ,另外 ,也 可 以 单独 下 载 . NET Framework 4 安装 。 

(2) 安装 完 开发 工具 后 ,需要 下 载 安装 Silverlight 4 Tools for Visual Studio 2010 开发 
包 。 安 装 完成 后 ,在 Visual Studio 2010 中 将 会 自动 更 新 添加 Silverlight 4 项 目 开 发 模板 ， 
以 及 Silverlight 4 SDK 和 相关 开发 环境 。 以 下 是 该 开发 包 中 包含 的 内 容 : 

Silverlight 4 developer runtime; 

Silverlight 4 SDK (software development kit); 

Update for Visual Studio 2010 and Visual Web Developer Express 2010 (KB982218); 

Silverlight 4 Tools for Visual Studio 2010; 

WCF RIA Services V1.0 for Silverlight 4。 

(3) 针对 Silverlight 美工 人 员 ,需要 下 载 Expression Studio 4, 因 为 只 有 Blend 4 支持 
Silverlight 4 项 目 开发 , 男 外 Blend 4 和 Visual Studio 2010 是 无 颖 结合 .使 用 Blend 4 可 以 
很 轻松 地 创建 和 修改 自 定义 控件 样式 ,开发 专业 的 Silverlight 项 目 界 面 。 

(4) 最 后 推荐 安装 Silverlight 4 Toolkit 控件 包 , 该 控件 是 微软 开发 的 Silverlight 控件 
扩展 包 。 其 中 包含 数 十 种 扩展 控件 ,可 以 方便 Silverlight 项 目 开 发 ,另外 该 项 目 是 开源 项 
目 ,开发 人 员 可 以 轻松 地 修改 控件 ,创建 自 定义 控件 效果 。 

安装 完成 以 上 工具 ,Silverlight 4 的 开发 环境 已 经 创建 完毕 ,如 果 是 使 用 Web Platform 
Installer, 可 以 选择 以 上 相关 选项 进行 一 键 安 装 , 就 可 以 开发 Silverlight 4 项 目 了 。 

另外 微软 已 经 推出 Silverlight 4 简体 中 文正 式 版 脱 机 帮助 文档 ,该 文档 包含 Silverlight 4 
所 有 的 技术 知识 ,是 开发 人 员 的 必 备 资料 。 
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7.4.3 认识 XAML 

1. 什么 是 XAML 

在 开发 Silverlight 应 用 程序 时 ,可 扩展 应 用 程序 标记 语言 XYAML (eXtensible 
Application Markup Language) 具 有 举足轻重 的 地 位 。 它 是 一 种 声明 性 语言 ,可 以 使 用 声明 
性 XAML 标记 创建 可 见 UI 元 素 , 然 后 可 以 使 用 单独 的 代码 隐藏 文 件 响 应 事件 和 操作 使 用 
XAML 声明 的 对 象 。 

XAML 本 质 上 属于 一 种 . NET Programming Language, 属于 通用 语言 执行 时 
(Common Language Runtime) ,与 HTML 类 似 , 特 点 是 用 来 描述 使 用 者 接口 。XAML 的 语 
法 格式 为 : 二 Application …/ 二 ,Application 是 必 备 的 基本 元 素 。XAML 可 以 定义 2D 和 
3D 物件 旋转、 动画 ,以 及 各 式 各 样 的 效果 。 如 下 面 的 示例 代码 ,声明 了 一 段 最 简单 的 
XAML: 


1 <UserControl x:Class = "SilverlightApplicationl.MainPage" 
2 xmlns = "http://schemas. microsoft. com/winfx/2006/xaml/presentation" 
3 xmlns:x= "http://schemas. microsoft. com/winfx/2006/xaml" 
4 xmlns:d= "http://schemas. microsoft. com/expression/blend/2008" 
5 xmlns:mc = "http://schemas. openxmlformats. org/markup - compatibility/2006" 
6 mc:Ignorable = "d" 
名 d:DesignHeight = "300" d:DesignWidth= "400"> 
8 <Grid x:Name = "LayoutRoot" Background = "White"> 
9 </Grid> 
</UserControl > 


这 段 代 码 最 外 层 是 以 UserControl 开始 的 ,然后 在 UserControl 中 声明 了 一 个 Grid 元 
素 , 仅 此 而 已 ,其 中 最 重要 的 一 点 就 是 命名 控件 的 声明 ,如 上 面 2、3 两 行 代码 。 第 一 个 声明 
将 整个 Silverlight 命名 空间 映射 为 默认 命名 空间 ,第 二 个 声明 为 XAML 映射 一 个 单独 的 
XML 命名 空间 ,通常 将 它 映射 到 x: 前 级 。 这 两 个 声明 之 间 的 关系 是 : XAML 是 一 个 请 言 
定义 ,而 Silverlight 是 将 XAML 用 作 语 言 的 一 个 实现 ,特别 要 指出 的 是 ,Silverlight 使 用 了 
XAML 的 一 个 严格 子 集 。XAML 语言 指定 某 些 语言 元 素 ,其 中 的 每 个 元 素 都 可 通过 针对 
XAML 命名 空间 执行 XAML 处 理 器 实现 来 进行 访问 。 

2. XAML 的 基本 使 用 

XAML 的 一 些 基本 使 用 包括 在 XAML 中 声明 对 象 .为 元 素 设 置 属性 等 。 在 XAML 中 
声明 对 象 可 以 直接 使 用 对 象 元 素 语法 ,使 用 开始 标记 和 结束 标记 将 对 象 声 明 为 XML 元 素 ， 
如 下 示例 代码 所 示 ,在 Grid 中 声明 了 一 个 矩形 元 素 ， 


< Grid x:Name = "LayoutRoot" Background = "White"> 
<Rectangle></Rectangle> 
</Grid> 


在 XAML 中 为 元 素 设置 属性 有 多 种 方式 可 供 选 择 : 
。 使 用 XML 特性 语法 ; 
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。 使 用 属性 元 素 语法 ; 

。 使 用 内 容 元 素 语法 。 

此 方法 列表 并 不 表示 可 以 使 用 这 些 方法 中 的 任何 一 种 来 设置 给 定 的 属性 ,在 Silverlight 
中 某 些 元 素 的 属性 设置 只 支持 其 中 一 种 ,而 某 些 属性 可 能 支持 多 种 属性 设置 方式 。 

使 用 XML 特性 语法 为 元 素 设置 属性 非常 简单 ,如 下 面 的 示例 代码 : 


<Rectangle Width=" 200" Height = " 100" Fill = "OrangeRed"></Rectangle> 


Silverlight 中 的 某 些 元 素 属 性 支持 使 用 属性 元 素 语法 来 设置 , 即 在 元 素 的 属性 中 再 指 
定 另 外 一 个 子 元 素 , 如 下 面 的 示例 代码 : 


< Rectangle Width= " 200" Height = " 100" > 
<Rectangle. Fill> 


< SolidColorBrush Color = "OrangeRed"></SolidColorBrush> 
</Rectangle. Fill> 
</Rectangle> 


某 些 Silverlight 元 素 提供 的 属性 允许 使 用 XAML 语法 时 忽略 该 属性 的 名 称 , 仅 通过 提供 
所 属 类 型 的 对 象 元 素 标 记 中 的 一 个 值 来 设置 该 属性 , 称 之 为 “内 容 元 素 语 法 ”。 如 TextBox 元 
素 的 Text 属性 ,可 以 如 下 示例 代码 所 示 设 置 Text 属性 而 无 须 指定 Text 属性 的 名 称 ; 

< TextBlock > 


欢迎 进入 Silverlight 世界 
</TextBlock > 


当然 对 于 该 属性 也 可 以 按 如 下 形式 指定 Text 属性 ,效果 是 一 样 的 ; 


< TextBlock Text = "欢迎 进入 Silverlight 世界 "></TextBlock> 


3. XAML 特性 


除了 上 面 介绍 的 XAML 的 基本 使 用 之 外 ,XAML 还 有 如 下 一 些 重要 的 特性 : 
。XAML 是 以 XML 为 基础 的 语法 扩展 ; 

。 XAML 必须 是 格式 良好 的 XML; 

。 XAML 中 的 标记 对 应 . NET Framework 中 的 类 型 ; 

。 XAML 具备 面向 对 象 及 继承 的 特性 ; 

。 XAML 区 分 大 小 写 ; 

。 XAML 中 能 实现 的 ,通过 隐藏 代码 同样 可 以 实现 ; 

。 XAML 中 也 会 创建 元 素 树 。 


7.4.4 创建 一 个 Silverlight 应 用 


后 面 的 所 有 内 容 都 围绕 “如 何 使 用 Silverlight 4 构建 一 个 简单 的 Digg 客户 端 应 用 ” 
展开 。 


首先 创建 一 个 新 的 Silverlight 应 用 ,选择 Visual Studio 2010 中 的 “文件 ”~“ 新 建 " 一 
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“项 目 ”>Silverlight 应 用 程序 。 如 图 7-7 所 示 。 


新 建 项 目 
景 近 的 模板 HET Franework 4 别 | 振 序 术 邦 站 吐 认 信 


已 安装 的 模板 

四 国 | oN sialverliaht 应 用 程序 Visual C# MM: Vis ot 

Visual C# | 一 个 使 用 Silverlight 凶 陵 丰富 

ean J Silverlight 类 库 a Internet 应 用 程序 的 空 项 目 

og CH Silverlight Business Applie" Visusl C# 
Reporting 较 

国 SharePoint 
Silverlight 


Wm 
旨 砚 WCF RIA Services Class Lib…Visual C# 
Workflow 多 
测试 
周 其 机 语言 
联机 模板 


| 网 Silverlight 导航 应 用 程序 。 Visusl C# 


Digesanpld| 
dbackmp\ 我 的 文档 \vi sual studio 2010\Projects 


Digesanple 


图 7-7 新 建 项 目 


我 们 将 该 项 目 命 名 为 “DiggSample”。 在 单 击 “ 确 定 ” 按 钮 后 ,Visual Studio 会 显示 另外 
一 个 对 话 框 ,允许 选择 是 否 只 创建 一 个 Silverlight 应 用 项 目 , 或 者 还 要 加 一 个 服务 器 端的 
ASP. NET Web 项 目 到 包含 Silverlight 应 用 的 解决 方案 里 去 ,如 图 7-8 所 示 。 

新 Web 项 目 命名 为 “DiggSample_WebServer”。 单 击 “ 确 定 ” 按 钮 之 后 ,Visual Studio 
会 为 我 们 创建 一 个 解决 方案 ,里 面包 含 一 个 Silverlight 客户 端 应 用 和 一 个 ASP. NET Web 
服务 器 端 应 用 ,如 图 7-9 所 示 。Silverlight 应 用 可 用 于 任何 Web 服务 器 (包括 Linux 上 的 
Apache) ,宿主 于 静态 HTML 文件 或 者 任何 服务 器 端 生成 的 网 页 中 。 在 这 个 Digg 示例 中 ， 
我 们 不 会 写 任何 服务 器 端的 代码 ,而 是 将 使 用 Silverlight 的 跨 域 Networking 功能 ,来 直接 
访问 Digg 服务 的 API。 选 择 创 建 一 个 ASP. NET Web 服务 器 项 目 , 主 要 是 想 获得 自动 的 
部 署 ,并 且 使 用 它 内 置 的 Web 服务 器 来 做 测试 。 


新 建 Silverlight 应 用 程序 世 罗 
单 击 下 面 的 介 沁 民 可 在 网 站 中 承 各 此 Silverlight 应 用 程序 。 否则 ,在 生 本 一 一 
成 过 程 中 格 生成 测试 页 。 eel EN 


| 忆 解决 方案 DiesSanplse” 2 个 项 目 ) 


在 新 网 站 中 承载 Silverlieht 应 用 程序 
全 过 日 - 国 Digswple 


新 Yeb 项 目 名 称 0D 


由- I Properties 
[Digesanple YebSorverl teb | 由 - 国 a , 
~ Wet 国 p_xaml 
le 田 - 国 nainpage_xanl 
| As iT Web 应 用 程序 项 目 司 日 EeSample YebServer. Yeb 
田 - 国 Properties 
选项 由 - 辆 引用 
Silverlight 版 本 (L): a ClientBin 
Silverlight 4 a 国 Digss mpleTestPaee. aspx 


国 DiggSampleTestPage. htnl 
昌 ] Silverlight. js 
由 - 国 Web. config 


口 启用 YCF RIA 服务 (A) 


[CC 线 车 梢 


图 7-8 新 建 Silverlight 应 用 程序 7-9 _ Silverlight 解决 资源 管理 器 
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如 果 我 们 做 一 次 编译 的 话 ,Visual Studio 会 自动 把 编译 好 的 Silverlight 应 用 复制 到 我 
们 的 Web 服务 器 项 目 中 去 ,不 需要 手工 的 步骤 或 配置 。VS 为 我 们 创建 的 默认 的 Web 服务 
器 项 目 包含 一 个 ASP. NET 网 页 和 一 个 静态 的 HTML 网 页 ,我 们 可 以 用 来 运行 和 测试 其 
中 的 Silverlight 应 用 。 


7.4.5 理解 Silverlight 应 用 的 内 容 
应 


在 默认 情形 下 ,一 个 新 建 的 Silverlight 应 用 项 目 包 含 一 个 MainPage. xaml 和 一 个 
App. xaml 文件 ,以 及 与 它们 相关 的 后 台 (code behind) 类 文件 (可 以 用 VB、C#、Ruby 或 
Python 来 编写 ) 。 

XAML 文件 是 XML 文本 文件 ,可 以 用 来 用 声明 的 方式 指定 Silverlight 或 WPF 应 用 
的 用 户 界面 。XAML 还 可 更 广泛 地 用 来 用 声明 的 方式 代表 . NET 对 象 。 

App. xaml 文件 一 般 用 来 声明 比如 像 画 刷 和 样式 对 象 这 样 可 在 整个 应 用 中 共享 的 资 
源 。App. xaml 的 后 台 Application 类 可 用 来 处 理应 用 级 的 事件 , 像 Application_Startup、 
Application_Exit 和 Application UnhandledException。 

MainPage. xaml 文件 默认 情形 下 是 在 应 用 激活 时 装载 的 起 始 的 UI 控件。 在 其 中 ,我 们 可 
以 使 用 UI 控件 来 定义 用 户 界面 ,然后 在 Page 的 后 台 代 码 类 里 处 理 它们 的 事件 ( 详 见 后 文 ) 。 

在 编译 DiggSample 项 目 时 ,默认 情形 下 , Visual Studio 会 把 代码 和 XAML 标识 编译 
进 一 个 标准 的 . NET 程序 集 文件 中 ,然后 把 它 和 任何 静态 资源 (图 片 或 我 们 想 要 包含 的 静态 
文件 ) 包 装 进 硬盘 上 一 个 叫做 “DiggSample. xap” 的 文件 中 去 ,如 图 7-10 所 示 。 


Folders 
Desktop 
园 Scott Guthrie 


BB Public 

潮 computer 

嘱 Network 

Control Panel 

国 Recyde Bin 


.DiggSamplexap Date modified: 2/18/2008 6:50 PM 
XAP File 
Date created: 2/18/2008 6:50 PM 


图 7-10 DiggSample. xap 文件 


“. xap” 文 件 使 用 标准 的 . zip 压缩 算法 来 减 小 客户 端 下 载 的 大 小 。 一 个 “hello world” 
Silverlight 应 用 (用 VB 或 C# 编 写 的 ) 其 大 小 大 概 为 4KB。 

要 宿主 和 运行 一 个 Silverlight 4 应 用 ,可 将 二 object 二 标签 加 到 任何 标准 的 HTML 页 
面 中 (不 需要 JavaScript) 并 将 其 指向 . xap 文件 。Silverlight 就 会 自动 下 载 这 个 . xap 文件 ， 
生成 实例 ,将 其 宿主 于 浏览 器 中 的 HTML 网 页 中 。 而 且 可 以 跨 浏览 器 (Safari、FireFox、IE 
等 ) 和 跨 平 台 (Windows、Mac、Linux) 工 作 。 

HTML 和 ASP. NET 测试 网 页 (内 含 二 object 二 标签 ,其 引用 指向 Silverlight 应 用 ) 是 
在 创建 项 目 时 自动 添加 的 ,只 要 按 F5 编译 .运行 和 测试 就 可 以 了 。 
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7.4.6 学 习 如 何 添加 控件 和 处 理事 件 


目前 的 Digg 应 用 什么 都 不 做 ,在 运行 它 时 ,只 会 调 出 一 个 空白 的 网 页 。 可 打开 项 目 中 
的 MainPage. xaml 文件 来 改变 它 , 往 里 面 加 些 内 容 ,代码 如 下 : 


< Grid x:Name = "LayoutRoot" Background = "White"> 


< Button x:Name = "myButton" Content = "Push Me!" Width = "100" Height = "50"> </Button> 
</Grid> 


当 我 们 运行 应 用 时 ,上 面 的 按钮 将 会 在 网 页 的 中 间 出 现 , 内 含 "Push Me!” 内 容 文字 ,如 
图 7-11 所 示 。 


, Test Page Fr DiggSample- Windows ieret piorer (eeHE 
IS© |e menocamosse [4 x | [coogee 


窗 哈 | 入 TestPageForDiggsam. | 


全 "加 一 


Rs Local intranet | Protected Mode: Off 


图 7-11 Button 按钮 


要 给 按钮 添加 行为 的 话 ,可 给 它 加 一 个 “Click” 事 件 处 理 函 数 。 可 在 源码 视图 中 通过 输 
入 事件 的 名 称 来 做 ,代码 如 下 : 


< Grid x:Name = "LayoutRoot" Background = "White"> 


< Button x: Name = "myButton" Content = "Push Me" Width = "100" Height = "50" Click = 
"myButton_Click"></Button > 


</Grid> 

后 台 代码 : 

private void myButton Click(object sender, RoutedEventArgs e) 
{ myButton. Content = "Pushed"; 

| 


7.4.7 Silverlight 界面 布局 


Silverlight 和 WPF 都 提供 了 非常 强大 而 灵活 的 界面 布局 管理 控件 ,能够 让 开发 人 员 和 
设计 人 员 轻 松 地 对 用 户 界 面 上 的 控件 进行 定位 。 该 布局 系统 支持 固定 的 定位 模型 ,可 用 于 
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显 式 指定 坐标 的 控件 ; 除 此 之 外 , 它 还 支持 一 种 更 为 动态 的 定位 模型 ,控件 和 布局 能 随 着 浏 
览 器 的 大 小 改变 而 自动 变换 其 大 小 和 方位 。 

在 Silverlight 和 WPF 中 ,开发 者 可 以 用 布局 面板 来 协调 包含 在 其 中 的 控件 的 位 置 和 大 
小 。Silverlight 4 中 内 建 的 布局 面板 包括 在 WPF 中 最 常用 的 3 种 : Canvas、StackPanel、Grid。 

1. 使 用 Canvas 绝对 布局 

Canvas 是 从 Silverlight 1.0 时 代 就 有 的 一 种 基础 布局 面板 , 它 支持 对 其 中 的 控件 采用 
绝对 坐标 定位 。 可 使 用 附加 属性 对 Canvas 中 的 元 素 进 行 定位 。 通 过 附加 属性 指定 控件 相 
对 于 其 直接 父 容器 Canvas 控件 的 上 、 下 、 左 、 右 坐标 的 位 置 。 附 加 属性 很 有 用 ,因为 它 让 父 
容器 可 以 扩展 其 中 包含 的 控件 的 属性 集 。Canvas 通过 定义 扩展 属性 Top 和 Left, 就 能 定义 
其 中 Button( 或 其 他 任何 UI 元素) 的 Left、Top;, 而 不 需要 真正 向 Button 类 中 添加 这 个 属 
性 ,或 修改 Button 类 。 

在 下 面 的 XAML 中 声明 了 两 个 Button 控件 ,它们 相对 于 父 容 器 Canvas 的 左边 距 是 
80, 相 对 于 父 容器 Canvas 的 上 边 距 分 别 是 50 和 150。 使 用 如 下 XAML 语法 即 可 完成 (其 
中 Canvas. Top 和 Canvas. Left 都 是 附加 属性 的 例子 ) : 


< Canvas Background = "#FF5C7590"> 

< Button Content = "1" Height = "50" Width = "100" Canvas. Left = "80”Canvas, Top = "50"> 
</Button> 

<Button Content = "2" Height = "50" Width = "100" Canvas. Left = "80" Canvas. Top = "150"> 
</Button> 
</Canvas > 


运行 效果 如 图 7-12 所 示 。Canvas 适用 于 其 中 包 
含 的 UI 元 素 比 较 固定 的 情形 ,但 是 如 果 你 想 向 其 中 添 
加 更 多 的 控件 ,或 者 UI 需要 改变 大 小 或 能 够 移动 ， 
Canvas 显得 不 太 灵 活 。 这 时 ,你 不 得 不 忙于 手写 代码 
来 移动 Canvas 中 的 东西 。 应 付 这 种 动态 的 场景 ,更 好 
的 办 法 通常 是 使 用 其 他 带 有 相关 功能 的 内 建 语义 的 布 
局 面板 ,如 StackPanel 和 Grid。 

2. 使 用 StackPanel 局 部 布局 

StackPanel 面板 布局 ,顾名思义 就 是 “堆栈 ?布局 ， 
它 是 一 种 非常 简单 的 布局 面板 ,支持 用 行 或 列 的 方式 
来 定位 其 中 的 UI 元 素 ,可 以 很 方便 地 对 UI 元 素 进行 
定位 而 无 须 设置 其 坐标 。StackPanel 常用 于 布局 页 面 
上 的 一 个 很 小 的 UI 部 分 。 加 二 2 oon 本 

例如 ,可 用 下 面 的 XAML 标签 在 页 面 上 垂直 排 布 3 个 按钮 : 


Local intranet | Protected Mode: Of R100% ~ 


< StackPanel > 
< Button Width = "200" Height = "50" Margin = "20" Content = "button"></Button> 
< Button Width = "200" Height = "50”Margin = "20" Content = "button"></Button> 
< Button Width = "200" Height = "50" Margin = "20" Content = "button"></Button> 
</StackPanel > 
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当然 也 可 指定 这 些 元 素 为 水 平 排列 ,通过 将 Orientation 属性 设置 为 Horizontal 来 完 
成 。 如 下 面 示例 代码 所 示 : 
< StackPanel Orientation = "Horizontal"> 
< Button Width = "200" Height = "50" Margin = "20" Content = "button"></Button> 


< Button Width= "200" Height = "50" Margin = "20" Content = "button"></Button> 
<Button Width= "200" Height = "50" Margin = "20" Content = "button"></Button> 


</StackPanel > 


运行 效果 如 图 7-13 所 示 。 


[IE [加 hapyocaihostsolsrsiverih ~ lieal ++ [ x | ang P 


帘 收 天 | 高 目 ] 建 以 网 站 ” 目 ] 网 页 快 RL 
看 SiverightApplicationl [Ll 全 > -可 凡 ”页面 P)- 安全 (S)- IA(O)r @- ” 


DE 区 hapV/localhost5015/SiiveriightApplicationlTes -lesl |x |I® sng 村 柯 ey 2 


安居 | 将 目 奸 XIS ” 尼 rh> 


入 SiverightApplicationl 从 -有 国 - 口 坊 - mepP)- 安 2(5)- IRO- 和- ” 


button 


图 7-13 ”StackPanel 控件 布局 


7.4.8 使 用 Grid 相对 布局 


Grid 控件 是 Silverlight 中 强大 和 灵活 的 布局 面板 , 它 支 持 用 多 行 和 多 列 的 方式 排 布 页 
面 元 素 ,非常 类 似 于 HTML 里 的 Table。 不 同 的 是 , 它 不 需要 将 UI 元 素 内 内 到 单元 格 中 ， 
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而 是 通过 二 Grid. RowDefinitions 二 和 二 Grid. ColumnDefinitions 二 属性 来 定义 Grid 的 行 和 
列 。 这 两 个 属性 要 定义 在 二 Grid 之 标签 中 ,然后 就 可 以 使 用 XAML 的 附加 属性 语法 指定 
UI 元 素 属于 哪 一 行 、 哪 一 列 。 

在 下 面 这 个 例子 中 ,将 使 用 Grid 进行 一 个 用 户 登 录 界 面 的 布局 ,为 了 使 显示 的 效果 明 
显 ,设置 ShowGridLines 属性 为 true。 在 Grid 的 Column 和 Row 的 附加 属性 中 ,索引 从 0 


开始 。 如 下 面 的 代码 所 示 : 


< Grid x:Name = "LayoutRoot" Background = "#46461F" ShowGridLines = "True"> 
<Grid. RowDefinitions> 
< RowDefinition Height = "120"/> 
< RowDefinition Height =" * "/> 
</Grid. RowDefinitions > 
<Grid. ColumnDefinitions > 
< ColumnDefinition Width= "100"/> 
< ColumnDefinition Width="*"/> 
</Grid. ColumnDefinitions > 
< TextBlock Grid. Row = "0" Grid. Column = "0" Text = "UserName:" VerticalAlign ment = 


"Center" Foreground = "White"/> 

< TextBlock Grid. Row = "1" Grid. Column = "0" Text = "Password:" VerticalAlign ment = 
"Center" Foreground = "White"/> 

< TextBox Grid. Row = "0" Grid. Column 
Alignment = "Left"/> 

< TextBox Grid. Row = "1" Grid. Column 
Alignment = "Left"/> 
</Grid> 


"1" Width = "200" Height = "30" Horizontal 


"1" Width = "200" Height = "30" Horizontal 


运行 效果 如 图 7-14 所 示 。 


| 息 SilverlightApplication1 - te J 
(Xe 四 http://localh.. vial 4+ | x | aing pr 
诊 和 天 | 次 旧 ] 建议 网 站 ” 友 ] 网 页 快 汛 库 

税 siverightApplicationl 偷 - ”四 咒 -”Ep)- 安全 (S)* ” 


password: 


3 伟 本 地 Intranet | 保护 楼 式 : 禁用 给 > 内 100% ~ 


图 7-14 Grid 控件 


可 以 看 到 ,使 用 Grid 可 实现 非常 零碎 和 复杂 的 界面 布局 。 除 了 可 像 前 面 的 示例 那样 指 
定 具体 的 宽度 和 高 度数 值 之 外 ,还 可 设置 ColumnDefinition 和 RowDefinition 的 高 度 和 宽 
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度 为 Auto ,这样 系 统 将 会 根据 置 于 其 中 的 用 户 界面 元 素来 自动 调整 Grid 的 高 度 和 宽度 ,如 


下 面 的 示例 代码 所 示 : 


< Grid x:Name = "LayoutRoot" Background = "#46461F"> 
< Grid.RowDefinitions> 
<RowDefinition Height = "Ruto"/> 
<RowDefinition Height = "Ruto"/> 
</Grid. RowDefinitions > 
< Grid. ColumnDefinitions> 
< ColumnDefinition Width= "Auto"/> 
< ColumnDefinition Width = "Auto"/> 
</Grid. ColumnDefinitions> 


< TextBlock Grid. Row = "0" Grid. Column = "0" Text = "UserName:" VerticalAlign ment = 


"Center" Foreground = "White"/> 


< TextBlock Grid. Row = "1" Grid. Column = " 0" Text = "Password:" VerticalAlign ment = 


"Center" Foreground = "White"/> 


< TextBox Grid. Row = "0" Grid. Column = "1" Width ="200"”Height = "30" Horizontal 


Alignment = "Left"/> 


< TextBox Grid. Row = "1" Grid. Column = "1" Width = "200" Height = "30" Horizontal 


Alignment = "Left"/> 
</Grid> 


运行 界面 如 图 7-15 所 示 。 


大 silverlightApplication1 - Windows Internet Explorer 


(3 (9 le) http://localh... 


次 收藏 交 | 鹤 县 建议 网 站 ” 此] 网 页 快讯 库 了 
@ siverightApplicationl 偷 ~ 7 四 册 PD) 


安全 (S) ~ 


全 本 地 Intranet | 保护 模式 灯 用 全 ~ 


图 7-15 Grid 控件 自 适应 边 距 


Grid 的 RowDefinitions 和 ColumnDefinitions 还 支持 一 个 叫做 “Proportional Sizing” 
( 按 比 例 缩放 ) 的 特性 。 用 这 个 特性 ,可 以 让 Grid 的 行列 按 相对 比例 的 方式 排放 (比如 指定 
第 二 行 的 尺寸 为 第 一 行 的 2 倍 )。 可 以 发 现 Grid 提供 了 非常 多 的 功能 和 灵活 性 , 它 是 最 常 


用 的 布局 面板 控件 。 


【 例 7.4】 用 布局 面板 排 布 Digg 页 面 。Digg 页 面 的 最 终 界面 如 图 7-16 所 示 。 
要 创建 这 种 布局 ,首先 添加 一 个 其 中 包含 两 个 RowDefinition 的 根 级 Grid 面板 。 第 一 


行 的 高 度 是 40px', 而 第 二 行 则 占据 所 有 剩 下 的 空间 (Height 一 "* ") : 
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[< » e+ ep/ /ocahosy siver/d 


Ny Got Busted by Cox for Downloading HBO’s In Treatment 


The Lost TV Show And Lost Season 1 2 3 4 All Episodes Downlo 


$ 加 Rock Of Love Or Muppet Love? 
| Johnny Chandler YouTube 


7-16 ”Digg 应 用 最 终 界面 


< Grid x:Name = "LayoutRoot" Background = "#FF5C7590" ShowGridLines = "True" Height = "50"> 
<Grid. RowDefinitions> 
< RowDef inition Height = "40"></RowDefinition> 
< RowDefinition Height = " * "></RowDefinition> 
</Grid. RowDefinitions > 
</Grid> 


运行 界面 如 图 7-17 所 示 。 
接 下 来 ,在 刚才 的 根 级 Grid 面板 里 ,添加 第 二 个 Grid 面板 ,用 它 来 排 布 页 面 顶部 的 行 
(页 面 头 部 )。 在 其 中 创建 3 列 : 分 别 容 纳 标题 .搜索 文本 框 和 搜索 按钮 ,代码 如 下 : 


< Grid x:Name = "LayoutRoot" Background = "#FF5C7590" ShowGridLines = "True" Height = "50"> 
<Grid. RowDefinitions > 
<RowDefinition Height = "40"></RowDefinition> 
<RowDefinition Height = " * "></RowDefinition> 
</Grid. RowDefinitions > 
<Grid Grid. Row = "0" Margin = "7" ShowGridLines = "True"> 
<Grid. ColumnDefinitions > 
< ColumnDefinition Width=" * "></ColumnDefinition> 
< ColumnDefinition Width = "200"></ColumnDefinition> 
< ColumnDefinition Width = "40"></ColumnDefinition> 
</Grid. ColumnDefinitions> 
</Grid> 
</Grid> 
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nple - Explore 
[hnpynecahosre0lpiggsam | 7 | x | 


er | Test Page For Diggsample [一 | 他" 国 "- 咒 " 隔 page" 轩 Tooks 


加 


全 Local intranet | Protected Mode Off 


图 7-17 Grid 控件 RowDefinitions 属性 


完成 了 这 些 后 ,就 得 到 了 Digg 搜索 页 面 的 基本 布局 。 接 下 来 要 做 的 是 向 其 中 添加 控 
件 。 如 果 不 用 艇 套 的 Grid, 还 可 用 一 个 2 行 3 列 的 Grid 来 完成 这 个 布局 ,配合 使 用 Grid 的 
ColumnSpan/RowSpan 特性 来 合并 多 个 列 中 的 内 容 ( 和 在 HTML table 中 的 做 法 类 似 ) 。 

首先 我 们 添加 一 个 二 Border 二 控件 ,设置 CornerRadius 属性 将 边框 的 各 角 改 为 圆 角 ， 
并 在 其 中 添加 一 些 文本 来 创建 标题 ; 然后 用 二 WatermarkedTextBox 过 控件 来 创建 第 二 列 
的 搜索 文本 框 ; 在 第 3 列 中 则 放置 一 个 搜索 二 Button 过 控件。 然后 在 第 二 行 放 一 些 占 位 文 
字 , 稍 后 将 在 这 里 显示 搜索 结果 。 代 码 如 下 : 


< Grid x: Name = "LayoutRoot" Background = "#FF5C7590" ShowGridLines = "True" Height = "298" 
Width= "400"> 
<Grid. RowDefinitions > 
<RowDefinition Height = "40"></RowDefinition> 
<RowDefinition Height ="* "></RowDefinition> 
</Grid. RowDefinitions > 
<Grid Grid. Row= "0" Margin = "7" ShowGridLines = "True" > 
< Grid. ColumnDefinitions> 
< ColumnDefinition Width = " * "></ColumnDefinition> 
< ColumnDefinition Width = "200"></ColumnDefinition> 
< ColumnDefinition Width = "40"></ColumnDefinition> 
</Grid. ColumnDefinitions> 
< Border Grid. Column = "0" CornerRadius = "10" Background = " #FFDEDEDE" Margin = "0,0,5,0"> 
< TextBlock Text = "DIGG Search" Margin = "10,3,0,0" Foreground = "#FF1451 7B"/> 
</Border> 
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< my: WatermarkedTextBox x:Name = "txtSearchTopic" FontSize = "14" Text = "Topic..."” 
Grid. Column = "1"/> 

< Button Content = "Search" x:Name = "SearchBtn" Grid. Column = "2"></Button> 

</Grid> 

< TextBlock Grid. Row = "1" Margin = "10" Foreground = "White"> 

Todo: Stories will display here... 

</TextBlock> 

</Grid> 


运行 效果 如 图 7-18 所 示 。 


| Todo: Stories will display here.... 


Local intranet | Protected Mode: Off 


图 7-18 Digg 页 面 布局 效果 


限于 篇 幅 ,更 多 的 Silverlight 技术 及 应 用 可 参阅 相关 书籍 和 网 络 资源 。 
思考 练习 题 


. 简 述 什么 是 Ajax 技术 ,Ajax 的 作用 是 什么 。 

.比较 传统 Web 应 用 和 基于 Ajax 框架 的 应 用 的 异同 。 

. 简 述 什么 是 Silverlight。 它 有 什么 特点 ? 

. 完成 书 上 所 示 Silverlight 实例 ,理解 属性 .事件 .模板 等 概念 。 


太史 


Web 站 点 规划 设计 ,性 能 “项 
优化 及 安全 性 


学 习 要 点 

(1) 了 解 Web 站 点 分 类 。 

(2) 熟悉 Web 站 点 建设 的 流程 。 

(3) 了 解 Web 站 点 规划 与 设计 的 一 般 性 原则 。 

(4) 掌握 Web 站 点 性 能 优化 和 提高 其 安全 性 的 技术 措施 。 

Web 开发 的 目的 就 是 建设 一 个 Web 站 点 应 用 系统 。 在 Web 站 点 建设 
之 前 必须 对 Web 站 点 进行 总 体 规划 和 设计 ,对 Web 站 点 主题 .内容 和 风格 等 
进行 统一 部 署 和 规划 ,具体 工作 包括 Web 站 点 内 容 的 组 织 、 页 面 的 目录 结 
构 链接 结构 、 页 面 组 成 布局 结构 ,以 及 网 页 的 各 部 分 元 素 分 布 应 该 采用 什 
么 样 的 颜色 、 如 何 搭 配 等 。Web 站 点 建设 过 程 中 还 必须 考虑 Web 站 点 的 访 
问 性 能 和 安全 性 问题 。 本 章 主 要 介绍 Web 站 点 建设 的 总 体 规划 过 程 , 并 就 
Web 站 点 性 能 和 安全 性 方面 给 出 一 些 方法 与 原则 ,使 读者 对 构建 Web 站 点 
的 整体 过 程 有 一 个 清晰 和 明确 的 了 解 。 


8.1 Web 站 点 的 分 类 及 运行 目的 


8.1.1 Web 站 点 的 分 类 

Internet 上 的 Web 站 点 数不胜数 .与日俱增 ,对 于 Web 站 点 的 分 类 并 没 
有 固定 的 标准 。 一 般 来 说 Web 站 点 可 大 致 按 以 下 的 方式 进行 分 类 。 

1. 按 Web 站 点 的 商业 性 质 划分 

Web 站 点 可 分 为 商业 性 和 非 商业 性 Web 站 点 。 商 业 性 Web 站 点 是 以 
提供 商品 交易 或 服务 等 为 目的 的 Web 站 点 。 例 如 淘宝 网 (http://www. 
taobao. com) ,京东 商城 (http://www. jd. com/) 等 都 属于 商业 性 Web 站 点 。 


2. 按 Web 站 点 服务 对 象 的 区 域 划分 
Web 站 点 可 以 划分 为 区 域 性 Web 站 点 和 非 区 域 性 Web 站 点 。 所 谓 区 
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域 性 Web 站 点 就 是 站 点 主题 围绕 特定 地 区 服务 的 那些 Web 站 点 。 例 如 ,重庆 信息 网 
(http://www. cqxxw. net/) 就 是 一 个 以 重庆 地 区 为 特定 服务 对 象 的 区 域 性 Web 站 点 。 

3. 按 Web 站 点 的 所 有 权 划 分 

按 Web 站 点 的 所 有 权 进 行 划分 ,Web 站 点 可 划分 为 政府 性 Web 站 点 、 学 校 Web 站 点 、 
企 事业 Web 站 点 ,组织 性 Web 站 点 和 个 人 Web 站 点 等 。 

例如 ,重庆 市 政府 公众 信息 网 (http://www. cq. gov. cn/) 是 一 个 政府 性 Web 站 点 。 重 
庆 大 学 网 (http://www. cqu. edu. cn) 是 一 个 学 校 Web 站 点 。 重 庆 长 安 网 (http://www. 
changan. com. cn/) 是 一 个 企业 Web 站 点 。 而 中 国 网 (http://www. china. org. cn) 是 一 个 
组 织 性 的 Web 站 点 。 

4. 按 组 成 网 页 的 形式 划分 

按 组 成 网 页 形式 的 不 同 可 将 Web 站 点 分 成 文字 型 Web 站 点 和 图 片 型 Web 站 点 。 前 
者 主要 是 由 文字 构成 的 ,例如 新 浪 网 (http://www. sina. com. cn) ,而 后 者 则 以 图 片 为 主 , 如 
“可 口 可 乐 中 国 ”Web 站 点 (http://www. coca-cola. com. cn) 。 

5. 按 Web 站 点 使 用 范围 划分 

按 Web 站 点 使 用 范围 进行 划分 可 划分 为 大 众 型 .企业 型 和 局 部 型 Web 站 点 。 大 众 型 
Web 站 点 面向 所 有 互联 网 上 的 用 户 , 例 如 Google、 搜 狐 、.QQ 等 。 企业 型 Web 站 点 面向 企 
业 用 户 ,企业 的 业务 处 理 在 互联 网 上 都 通过 该 站 点 来 实现 。 局 部 型 Web 站 点 是 指 位 于 企业 
内 联网 上 的 Web 站 点 。 
8.1.2 Web 站 点 的 运行 目的 

Web 站 点 的 运行 目的 主要 包括 信息 服务 .教育 和 娱乐 .办公 和 信息 管理 ,电子 商务 等 。 

1. 信息 服务 

许多 站 点 建设 的 最 根本 目的 是 提供 信息 服务 ,分 为 无 倘 和 有 偿 信 息 服 务 。 例 如 学 校 , 政 
府 、 企 业 的 形象 宣传 ,以 及 企业 商品 信息 的 发 布 等 这 些 都 是 免费 的 ,也 有 不 少 网 站 提供 有 偿 
信息 服务 。 

2. 教育 和 娱乐 

教育 机 构 .培训 机 构 等 构建 Web 站 点 的 目的 则 是 提供 网 上 教育 服务 ,例如 网 上 学 校 、. 远 
程 教学 .网 上 培训 ……- 另外 ,催生 了 大 量 游戏 .音乐 .视频 等 网 站 用 于 公众 娱乐 。 

3. 办 公 和 信息 管理 

提供 办 公 自 动 化 或 者 进行 企业 的 信息 化 管理 等 也 是 Web 站 点 建设 的 主要 目的 之 一 。 

4. 电子 商务 

常见 电子 商务 模式 主要 有 : B2B(Business to Business) 、B2C(Business to Customer)、 
C2C(Customer to Customer) ,BforC(Business For Customer) 等 。 

B2B 指 的 是 商家 ( 泛 指 企业 ) 对 商家 的 电子 商务 , 即 企业 与 企业 之 间 通 过 互联 网 进行 产 
品 、 服 务 及 信息 的 交换 。 通 俗 的 说 法 就 是 指 进行 电子 商务 交易 的 供需 双方 都 是 商家 (或 企 
业 、 公 司 ) ,它们 使 用 了 Internet 的 技术 或 各 种 商务 网 络 平台 ,完成 商务 交易 的 过 程 。 这 些 过 
程 包 括 : 发 布 供求 信息 ; 订货 及 确认 订货 ; 支付 过 程 及 票据 的 签发 .传送 和 接收 ; 确定 配送 
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方案 并 监控 配送 过 程 等 。 

B2C 即 商家 对 消费 者 ,也 就 是 通常 说 的 商业 零售 ,直接 面向 消费 者 销售 产品 和 服务 。 
最 具有 代表 性 的 B2C 电子 商务 模式 就 是 网 上 零售 网 站 ,例如 中 文 网 上 书店 当当 网 、 美 国 的 
亚马逊 网 上 商店 等 都 是 B2C 电子 商务 网 站 。 

C2C 即 个 体 用 户 对 个 体 用 户 , 或 者 说 是 个 体 用 户 之 间 的 电子 商务 , 即 个 体 用 户 与 个 体 
用 户 之 间 通 过 互联 网 进行 产品 .服务 及 信息 的 交换 。 例 如 eBay、 易趣, 淘宝. 拍 拍 网 等 。 

BforC 是 指 中 小 企业 和 个 人 消费 者 的 任何 零星 采购 都 将 享受 到 “团购 ”价格 ,使 消费 者 
喜欢 的 团购 不 再 受 时 间 、 地 点 、 型 号 的 限制 ,真正 实现 “随时 随地 的 团购 ”。 


8.2 ”Web 站 点 的 目录 结构 和 链接 结构 


8.2.1 Web 站 点 的 目录 结构 


Web 站 点 的 目录 是 指 建 立 Web 站 点 时 创建 的 目录 。 浏 览 者 并 不 关心 目录 结构 的 好 
坏 , 但 它 对 站 点 的 维护 ,未 来 内 容 的 扩充 和 移植 都 会 有 重要 的 作用 。 下 面 是 建立 Web 站 点 
目录 结构 的 一 些 建议 。 

(1) 不 要 将 网 站 内 容 全 部 放 在 一 个 目录 中 , 按 菜单 栏目 内 容 建 立 子 目录 。 

将 网 站 内 容 全 部 放 在 一 个 目录 中 会 造成 文件 管理 混乱 ,很 难 维护 。 管 理 员 常常 会 搞 不 
清 哪 些 文件 需要 编辑 和 更 新 ,哪些 无 用 的 文件 可 以 删除 ,哪些 是 相关 联 的 文件 。 另 外 服务 器 
一 般 都 会 为 网 站 建立 一 个 文件 索引 ,如 果 将 所 有 文件 都 放 在 一 个 目录 中 ,在 重新 建立 索引 时 
将 影响 服务 器 性 能 。 

建议 按 主 菜单 栏目 建立 子 目录 。 例 如 企业 站 点 可 以 按 公司 简介 ,产品 介绍 .价格 、 在 线 
订单 、 反 馈 联系 等 内 容 来 建立 相应 子 目 录 。 而 一 些 相关 性 强 、 不 需要 经 常 更 新 的 栏目 可 以 合 
并 放 在 一 个 统一 目录 下 。 比 如 图 片 ,可 以 在 根 目 录 下 建立 一 个 存放 图 片 的 子 目录 ,以 存放 各 
个 栏目 共用 的 图 片 ,各 个 栏目 下 再 设立 图 片子 目录 ,存放 各 个 栏目 内 所 需要 的 图 片 。 

(2) 目录 的 层次 不 要 太 深 ,尽量 用 英文 命名 目录 和 文件 名 。 

一 般 来 说 , Web 站 点 的 目录 层次 不 要 超过 3 层 ,这样 便于 维护 管理 。 目 录 路 径 过 深 , 跳 
转 的 URL 地 址 就 会 变 长 ,会 增加 页 面 的 链接 复杂 性 。 使 用 中 文 命名 目录 和 文件 名 则 可 能 
对 网 址 的 正确 显示 造成 困难 ,应 尽量 使 用 英文 命名 ,而 且 应 尽量 使 用 英文 意义 明确 的 目录 名 
和 文件 名 ,以 便于 维护 和 管理 。 要 注意 一 般 目 录 名 和 文件 名 可 达 255 个 字符 ,但 请 不 要 使 用 
过 长 的 名 字 ( 请 读者 思考 为 什么 ) 。 


8.2.2 Web 站 点 的 链接 结构 


Web 站 点 的 链接 结构 是 指 页 面 之 间 相 互 链接 的 拓扑 结构 , 它 建立 在 目录 结构 基础 之 
上 ,而 且 可 以 跨越 目录 。Web 站 点 的 链接 结构 有 三 种 基本 方式 : 
(1) 树 状 链接 结构 。 这 种 结构 类 似 于 目录 结构 。 首 页 链接 指向 一 级 页 面 , 一 级 页 面 链 
接 指向 二 级 页 面 。 浏 览 这 样 的 链接 结构 时 ,用 户 可 以 一 级 级 进入 ,一 级 级 退出 。 这 种 结构 的 
优点 是 条 理 清晰 ,访问 者 可 以 明确 地 知道 自己 在 什么 位 置 . 不 会 “迷路 ”"。 它 的 缺点 是 浏览 效 
率 低 。 用 户 从 一 个 栏目 下 的 子 页 面 到 另 一 个 栏目 下 的 子 页 面 , 必 须 绕 经 首页 。 
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(2) 星 状 链接 结构 。 这 种 结构 类 似 于 Web 服务 器 之 间 i 
的 链接 ,结构 中 的 每 个 页 面相 互 之 间 都 建立 了 链接 。 这 种 链 J 
接 结构 的 优点 是 浏览 方便 ,访问 者 可 以 随时 到 达 自己 想 要 的 | 一 级 -级 -级 
页 面 。 缺 点 是 链接 太 多 ,容易 使 浏览 者 迷路 , 搞 不 清 自己 在 J 2 
什么 位 置 。 J 

(3) 混合 结构 。 在 实际 的 Web 站 点 设计 中 ,总 是 将 以 上 | 了 页 子 
两 种 结构 混合 起 来 使 用 ,希望 浏览 者 是 可 以 方便 快速 地 到 达 | 入。 
自己 需要 的 页 面 , 又 可 以 清晰 地 知道 自己 的 位 置 。 比 较 好 的 | 子 和 了 了 
解决 方法 是 : 首页 和 一 级 页 面 之 间 用 星 形 链接 结构 ,一 级 和 
二 级 .二 级 和 三 级 页 面 之 间 均 采用 树 型 结构 。 这 样 既 提 高 了 ”图 51 混合 链接 结构 
浏览 效率 ,又 提高 了 站 点 结构 的 清晰 程度 ,如 图 8-1 所 示 。 


8.3 ”Web 站 点 的 主题 .名称 和 Logo 标志 


建设 一 个 网 站 首先 要 确定 网 站 所 属 类 别 下 的 主题 。 主 题 是 Web 站 点 的 灵魂 ,一 个 好 的 
Web 站 点 首先 需要 好 主题 。Web 站 点 若 没有 准确 的 定位 ,内 容 太 过 丰富 庞杂 ,再 好 的 色彩 
搭配 和 特效 ,也 会 缺少 吸引 力 。 

一 旦 确定 站 点 主题 ,就 应 该 围绕 主题 给 Web 站 点 起 一 个 名 字 即 Web 站 点 名 称 。Web 
站 点 名 称 对 Web 站 点 的 形象 和 宣传 推广 有 很 大 影响 。 例 如 “电脑 学 习 室 ”和 “电脑 之 家 ” 显 
然 是 后 者 简练 ;“ 儿 童 天 地 ”和 “中 国 幼 儿 园 ” 显 然 是 后 者 大 气 。Web 站 点 的 名 称 选择 一 般 来 
说 应 合 情 、 合 理 、 合 法 ,不 能 用 色情 的 、 迷 信和 的 、 反 动 的 .危害 社会 安全 的 名 词 。 名 称 能 体现 
Web 站 点 的 内 涵 , 给 浏览 者 更 多 的 新 意 和 空间 想象 力 。 例 如 黑客 基地 、 久 听 音 乐 和 图 书 时 
空 等 。Web 站 点 的 名 称 尽量 不 要 使 用 中 英文 混合 的 名 称 , 也 不 能 太 长 ,要 简单 易 记 。 

站 点 标志 (Logo) 作 用 类 似 于 商标 , 它 是 Web 站 点 特色 和 内 涵 的 集中 体现 。Web 站 点 
强大 的 整体 实力 ,优质 的 产品 和 服务 都 被 涵盖 于 标志 中 。 通 过 不 断 地 刺激 和 反复 地 刻画 , 标 
志 将 深 深 地 留 在 网 民心 中 ,从 而 让 网 民 一 看 见 Logo 就 能 联想 起 相应 的 Web 站 点 。 具 有 长 
远 眼光 的 企业 十 分 重视 Logo 设计 ,在 Web 站 点 建设 初期 ,好 的 设计 无 疑 是 日 后 无 形 资产 积 
累 的 重要 载体 。 最 常用 和 最 简单 的 方式 是 将 自己 Web 站 点 的 名 称 作为 标志 ,将 不 同 的 字 
体 .字母 的 变形 等 组 合 起 来 可 以 很 容易 地 制作 好 自己 的 标志 ,如 搜索 引擎 Google 的 标志 ,就 
很 有 动感 特色 。 


8.4 Web 站 点 规划 的 内 容 


Web 站 点 规划 是 指 在 Web 站 点 建设 前 对 市 场 进行 分 析 、 确 定 Web 站 点 的 目的 和 功能 ， 
并 根据 需要 对 Web 站 点 建设 中 的 技术 内 容 、 费 用 、 测 试 . 维 护 等 做 出 规划 。 在 建立 Web 站 
点 前 应 明确 建设 Web 站 点 的 目的 、 确 定 Web 站 点 的 功能 、 确 定 Web 站 点 规模 ,投入 费用 ， 
并 进行 必要 的 市 场 分 析 等 。 只 有 详细 地 规划 ,才能 避免 在 Web 站 点 建设 中 出 现 问题 ,使 
Web 站 点 建设 能 顺利 进行 。 

Web 站 点 规划 的 内 容 包括 以 下 几 个 方面 。 
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1. 建设 Web 站 点 前 的 市 场 分 析 

(1) 相关 行业 的 市 场 是 怎样 的 ? 市 场 有 什么 样 的 特点 ? 是 否 能 够 在 互联 网 上 开展 公司 
业务 ? 

(2) 市 场 主要 竞争 者 分 析 , 包 括 竞争 对 手 Web 站 点 情况 及 其 功能 作用 。 

(3) 公司 自身 条 件 分 析 , 包 括 公司 概 况 、 市 场 优 势 、 可 以 利用 Web 站 点 提升 哪些 竞争 
力 、 建 设 Web 站 点 的 能 力 ( 费 用 、 技 术 、 人 力 等 )。 

2. 建设 Web 站 点 的 目的 及 功能 定位 

(1) 为 什么 要 建立 Web 站 点 ? 是 为 了 宣传 产品 ,进行 电子 商务 ,还 是 要 建立 行业 性 
Web 站 点 ? 是 企业 的 需要 还 是 市 场 开 拓 的 延伸 ? 

(2) 整合 公司 资源 ,确定 Web 站 点 功能 。 根 据 公司 的 需要 和 计划 ,确定 Web 站 点 的 功 
能 ,如 产品 宣传 .网 上 营销 、 客 户 服务 .电子 商务 等 。 

(3) 根据 Web 站 点 功能 ,确定 Web 站 点 应 达到 的 目的 。 

(4) 企业 内 部 网 的 建设 情况 和 Web 站 点 的 可 扩展 性 。 

3. Web 站 点 技术 解决 方案 

根据 Web 站 点 的 功能 确定 Web 站 点 技术 解决 方案 。 主 要 包括 : 

(1) 服务 器 选择 。 采 用 自 建 服务 器 ,还 是 租用 虚拟 主机 ? 

(2) 操作 系统 选择 。 用 UNIX、Linux 还 是 Windows? 

(3) 解决 方案 选择 。 是 自己 开发 还 是 采用 现 有 的 方案 ? 具体 描述 其 实施 方案 ? 

(4) 分 析 相 应 的 投入 成 本 、 运 行 费用 、 稳 定性 和 安全 性 等 。 

4. Web 站 点 内 容 规 划 

(1) 根据 Web 站 点 的 目标 和 功能 规划 Web 站 点 内 容 。 一 般 企业 Web 站 点 应 包括 公司 
简介 、 产 品 介 绍 、 服 务 内 容 、 价 格 信息 、 联 系 方式 、 网 上 订单 等 基本 内 容 。 

(2) 电子 商务 类 Web 站 点 要 提供 会 员 注 册 .详细 的 商品 服务 信息 、 信 息 搜索 查询 .订单 
确认 、 付 款 `. 个 人 信息 保密 措施 .相关 帮助 等 。 

(3) 如 果 Web 站 点 栏目 比较 多 ,应 考虑 采用 专人 负责 相关 栏目 方案 。Web 站 点 的 内 容 
是 吸引 浏览 者 的 最 重要 的 因素 ,无 内 容 或 不 实用 的 信息 不 会 吸引 匆匆 浏览 的 访客 。 如 果 事 
先 对 人 们 希望 阅读 的 信息 进行 调研 ,并 在 Web 站 点 发 布 后 调查 人 们 对 内 容 的 满意 度 , 便 可 
以 及 时 调整 Web 站 点 内 容 。 

5. 网 页 设计 

(1) 网 页 美术 设计 一 般 要 与 企业 整体 形象 一 致 .要 符合 规范 。 要 注意 网 页 色彩 、 图 片 的 
应 用 及 版 面 规划 ,以 保持 网 页 的 整体 一 致 性 。 

(2) 在 新 技术 的 采用 上 要 考虑 主要 目标 访问 群体 的 分 布地 域 .年 龄 阶层 、 网 络 速 度 、 阅 
读 习 惯 等 。 

(3) 制订 网 页 改版 计划 ,如 半年 到 一 年 时 间 进 行 较 大 规模 改版 等 。 

6. Web 站 点 测试 

规划 在 完成 Web 站 点 后 将 要 进行 哪些 测试 和 如 何 进 行 测试 ,测试 的 指标 是 什么 等 。 
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7. Web 站 点 发 布 与 推广 

Web 站 点 测试 后 将 采用 什么 方法 进行 发 布 ,规划 Web 站 点 的 推广 策略 。 

8. Web 站 点 维护 

(1) 服务 器 及 相关 软 硬 件 的 维护 。 对 可 能 出 现 的 问题 进行 评估 ,制定 响应 时 间 。 

(2) 数据 库 维 护 。Web 站 点 维护 的 一 项 重要 内 容 就 是 数据 库 维 护 。 

(3) 内 容 的 更 新 、 调 整 等 。 

(4) 制定 相关 Web 站 点 维护 的 规定 ,将 Web 站 点 的 维护 制度 化 ,规范 化 。 

9. Web 站 点 建设 日 程 表 

规划 各 项 任务 的 开始 及 完成 时 间 、 负 责 人 等 。 

10. 费用 明细 

各 项 事宜 所 需 费用 清单 。 

以 上 即 为 Web 站 点 规划 设计 报告 书 中 应 该 体现 的 主要 内 容 ,根据 不 同 的 需求 和 建站 目 
的 ,内 容 也 会 有 所 增加 或 减少 。 在 建设 Web 站 点 之 初 一 定 要 进行 精心 规划 ,才能 达到 预期 
建站 目的 。 


8.5 设计 Web 站 点 的 一 般 性 原则 


下 面 是 Web 站 点 设计 中 的 一 般 性 原则 。 

1. 以 客户 为 中 心 进行 Web 站 点 设计 

站 点 是 展现 企业 形象 介绍 产品 和 服务 、 体 现 企 业 发 展 战略 的 重要 途径 ,因此 必须 明确 
设计 站 点 的 目标 和 用 户 需 求 , 从 而 做 出 切实 可 行 的 设计 方案 。 要 根据 客户 的 需求 .市场 的 状 
况 ,企业 自身 的 情况 等 进行 综合 分 析 和 设计 。 在 设计 规划 之 初 要 考虑 如 下 问题 : 建设 Web 
站 点 的 目的 是 什么 ? 为 谁 提供 服务 和 产品 ?企业 能 提供 什么 样 的 产品 和 服务 ? Web 站 点 
的 目标 消费 者 和 受众 的 特点 是 什么 ?企业 产品 和 服务 适合 什么 样 的 表现 方式 (风格 )? 

2. 总 体 设计 方案 主题 鲜明 

在 目标 明确 的 基础 上 ,对 Web 站 点 的 整体 风格 和 特色 做 出 定位 ,对 Web 站 点 的 组 织 结 
构 进行 规划 。 好 的 Web 站 点 应 该 主题 鲜明 、 要 点 明确 ,要 充分 利用 各 种 技术 手段 表现 Web 
站 点 的 个 性 和 情趣 ,体现 Web 站 点 的 特色 。 

3. 网 页 形式 与 内 容 统一 

运用 对 比 与 调和 、 对 称 与 平衡 .节奏 与 韵律 以 及 留 白 等 手段 ,利用 空间 文字、 图 形 之 间 
的 相互 关系 来 达到 整体 的 均衡 以 及 和 谐 的 美感 。 如 对 称 原 则 的 运用 在 页 面 设计 时 有 可 能 会 
使 页 面 显得 呆板 ,但 如 果 加 入 一 些 富有 动感 的 文字 、 图 案 ,或 采用 和 夸张 的 手法 来 表现 内 容 往 
往 会 达到 更 好 的 效果 。 点 , 线 、 面 是 视觉 语言 中 的 基本 元 素 , 要 使 用 点 、 线 、 面 的 互相 穿插 、 互 
相 衬 托 、 互 相 补 充 才能 构成 最 佳 的 页 面 效 果 。 

4. Web 站 点 的 结构 


在 设计 Web 站 点 结构 时 ,应 遵循 结构 清晰 、 导 向 清楚 、 使 用 方便 的 原则 。 应 使 用 一 些 醒 
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目的 标题 或 文字 来 突出 产品 与 服务 ,在 导航 设计 中 使 用 超 文本 链接 或 图 片 链接 ,并 且 页 面 之 
间 的 链接 关系 要 一 目 了 然 。 

5. 访问 速度 

应 想方设法 提高 Web 站 点 的 访问 速度 ,例如 通过 网 页 减肥 、Ajax 技术 等 来 加 快 访问 速 
度 。 绝 大 多 数 浏览 者 不 会 进入 需要 等 待 1min 才能 进入 的 Web 站 点 。 设 计 Web 站 点 应 尽 
量 避 免 使 用 过 多 的 图 片 及 尺寸 过 大 的 图 片 。 设 计 Web 站 点 时 最 好 将 主要 页 面 的 容量 控制 
在 50KB 以 内 ,平均 30KB 左右 ,以 确保 普通 浏览 者 等 待 页 面 的 时 间 不 超过 10s。 

6. 充分 利用 多 媒体 技术 

为 了 吸引 浏览 者 的 注意 力 , 页 面 内 容 应 采用 动画 ,Flash 等 形式 来 表现 。 但 要 注意 由 于 
网 络 带宽 的 限制 ,在 使 用 多 媒体 形式 来 表现 网 页 内 容 时 应 考虑 客户 端的 传输 速度 。 

7. Web 站 点 信息 的 动态 发 布 

站 点 信息 的 不 断 更 新 ,会 让 浏览 者 了 解 企业 的 最 新 发 展 动 态 和 网 上 服务 等 ,同时 也 会 帮 
助 企业 建立 良好 的 形象 。 应 在 后 台 建 立信 息 的 动态 发 布 机 制 及 时 更 新 企业 站 点 内 容 。 

8. 提供 和 用 户 相 互 沟通 的 渠道 

在 企业 的 Web 站 点 上 ,应 建立 和 用 户 的 沟通 渠道 ,例如 建立 留言 板 和 在 线 E-mail 系 
统 、 短 消息 等 。 

总 之 ,合理 的 Web 站 点 框架 结构 .优化 的 网 页 布局 ,友善 的 访问 浏览 方式 .精美 的 视觉 
效果 、 适 宜 的 创意 设计 是 设计 Web 站 点 应 遵循 的 基本 原则 。 


8.6 建设 Web 站 点 的 一 般 步 又 


建立 Web 站 点 和 做 其 他 任何 项 目 一 样 ,Web 站 点 的 规划 是 成 功 的 关键 。 建 立 Web 站 
点 首先 要 明确 建立 Web 站 点 的 目的 是 什么 ,并 对 目标 进行 分 析 , 从 市 场 风 险 、 技 术 风险 、 执 
行 风险 .组 织 风险 ,政策 风险 等 方面 综合 考虑 ,然后 最 终 确 定 Web 站 点 建立 的 目标 和 实施 策 
略 ,接着 进行 费用 预算 和 制定 时 间 表 。 

在 确定 Web 站 点 目标 后 ,需要 申请 域名 ,安装 Web 服务 器 .邮件 服务 器 数据库 服务 器 
等 ,并 确定 Web 站 点 接 人 Internet 的 方法 ,然后 通过 Web 开发 工具 进行 Web 站 点 设计 和 
开发 ,最 后 进行 Web 站 点 调试 ,调试 成 功 后 最 终 正式 开通 Web 站 点 。 

1. Web 站 点 准备 阶段 
建立 一 个 Web 站 点 之 前 ,首先 要 做 的 事情 就 是 冷静 下 来 .认真 思考 和 计划 ,进行 可 行 性 
分 析 , 根 据 建 立 Web 站 点 的 目标 ,规划 出 Web 站 点 的 大 致 结构 。 考 虑 采用 哪 一 种 操作 系 
统 , 因 为 不 同 的 操作 系统 将 采用 不 同 的 Web 服务 器 、 邮 件 服务 器 、 数 据 库 服务 器 。 采 用 数据 
库 系 统 建立 的 Web 站 点 可 以 极 大 地 提升 Web 站 点 的 功能 ,因此 进行 数据 库 的 初步 规划 是 
必要 的 。 此 外 ,还 必须 考虑 开发 Web 站 点 并 维持 站 点 运行 的 费用 问题 。 准 备 工作 基本 确定 
后 ,下 一 步 就 是 域名 注册 。 

2. 域名 注册 

域名 注册 实际 上 就 是 为 Web 站 点 申请 一 个 名 称 ,以 方便 人 们 来 访问 它 。 域 名 是 在 
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Internet 中 用 于 解决 地 址 对 应 问题 的 一 种 方法 ,代表 着 一 个 IP 地 址 。 域 名 存放 在 一 个 数据 
库 中 ,有 一 些 服务 器 专门 负责 域名 与 IP 地 址 的 解析 工作 ,该 服务 器 称 为 域名 服务 器 DNS 
(Domain Name Server) 。 域 名 具有 唯一 性 ,被 企业 誉 为 “企业 的 网 上 商标 ”。 域 名 区 分 为 国 
际 域名 和 国内 域名 ,例如 sina. com 为 国际 域名 ,而 sina. com. cn 为 国内 域名 。 域 名 中 . com 
表示 工 、 商 ,金融 企业 ;. edu 表示 教育 机 构 ; . gov 表示 政府 部 门 ; . net 表示 网 络 服务 部 门 ; 
.ac 表示 科研 机 构 。 国 内 域名 中 . cn 表示 中 国 , 其 他 如 . hk 表示 中 国 香港 特别 行政 区 ; . us 
表示 美国 ,等 等 。 申 请 国际 域名 还 是 申请 国内 域名 ,应 该 根据 Web 站 点 的 服务 范围 来 选择 ， 
如 果 Web 站 点 服务 范围 仅 限于 国内 , 则 可 以 考虑 申请 一 个 国内 的 域名 ,如 建立 的 Web 站 点 
面向 全 球 提供 信息 服务 ,可 以 申请 一 个 国际 域名 。 当 然 不 管 你 申请 国际 域名 还 是 国内 域名 ， 
都 一 样 可 以 被 Internet 上 的 任何 用 户 访 问 。 域 名 相当 于 网 上 商标 ,因此 最 好 国内 和 国际 域 
名 一 同 注册 。 注 册 一 个 域名 后 ,注册 机 构 按 年 收取 一 定 费 用 。 

注册 域名 时 应 首先 确定 一 个 域名 ,域名 应 简短 、 切 题 、 通 俗 。 国 际 域名 是 否 已 经 被 注册 
可 通过 http://www. interNIC. org( 国 际 互联 网 络 信息 中 心 ,interNIC) 或 者 http://www. 
networksolutions. com 站 点 进行 检查 ; 国内 域名 是 否 已 经 被 注册 可 通过 http://www. 
cnnic. com. cn( 中 国 互 联网 络 信息 中 心 ,CNNIC) 站 点 进行 检查 。 注 册 国 际 域名 没有 条 件 限 
制 ,单位 和 个 人 均 可 以 申请 。 注 册 国内 域名 则 必须 具备 法 人 资格 。 申 请 人 需 将 申请 表 加 盖 
公章 ,连同 单位 营业 执照 副本 (或 政府 机 构 条 码 证 书 复印 件 ) 提 交 给 相关 注册 服务 商 才 能 申 
请 注册 。 国 际 域名 与 国内 域名 在 功能 上 没有 任何 区 别 ,都 是 互联 网 上 唯一 的 企业 标识 ,只 是 
在 最 终 管理 机 构 上 有 所 区 别 。 注 册 国际 域名 由 国际 域名 管理 机 构 interNIC 负责 受理 ,手续 
非常 简便 ,只 需 上 网 到 相关 Web 站 点 ,填写 注册 表 后 提交 ,30 天 内 支付 注册 费 后 即 可 开通 。 
国内 域名 注册 的 权威 机 构 是 CNNIC。 网 上 有 很 多 Web 站 点 (例如 中 国 万 网 ) 提 供 域 名 注册 
服务 ,可 以 通过 该 Web 站 点 在 线 注册 国内 域名 和 国际 域名 ,它们 的 注册 费用 各 不 相同 ,有 的 
还 是 免费 的 。 

3. Web 站 点 的 需求 分 析 和 总 体 设计 

在 建设 一 个 网 站 之 前 , 不 必 一 开始 就 忙 着 准备 素材 ,首先 要 完成 站 点 的 需求 分 析 和 总 
体 设计 。 需 求 分 析 是 网 站 设计 的 重要 环节 。 需 求 分 析 工 作 做 得 越 细 , 对 网 站 的 建设 成 功 就 
越 有 帮助 ,用 户 对 网 站 设计 方案 的 认可 度 就 越 高 ,就 越 能 达到 用 户 的 最 大 满意 度 。 在 需求 分 
析 的 基础 上 再 进行 总 体 设计 和 数据 库 设计 。 在 此 过 程 中 确定 站 点 建设 所 需要 的 软件 和 硬件 
配置 .连接 因特网 的 方式 .运行 和 维护 费用 等 。 

4. 确定 Web 站 点 的 组 织 与 风格 

在 上 述 工作 基础 上 ,确定 Web 站 点 的 主页 版 面 、 色 彩 搭配 等 ,勾画 出 整个 Web 站 点 系 
统 的 所 有 人 全貌, 包括 每 个 页 面 的 版 式 布局 链接 关系 、 注 意 事 项 等 。Web 站 点 的 结构 层次 不 
能 太 深 ,应 遵从 “三 次 单 击 ” 原 则 , 即 Web 站 点 的 任何 信息 都 应 该 在 最 多 三 次 单 击 后 找到 。 
另外 也 要 注意 结构 层次 不 能 太 浅 ,什么 东西 都 放 在 一 个 页 面 上 ,将 给 入 以 Web 站 点 组 织 混 
乱 、 设 计 者 毫 无 经 验 的 印象 。 应 该 确定 一 种 方法 使 得 网 页 内 容 可 以 在 Internet Explorer、 
Chrome、Firefox 等 主流 浏览 器 中 都 能 被 正常 显示 一般 通过 在 页 面 脚本 程序 中 针对 不 同济 

Web 站 点 的 组 织 与 风格 是 至 关 重 要 的 。 有 些 Web 站 点 充满 了 各 种 * 酷 ?的 特效 和 五 彩 
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缤纷 的 图 片 , 却 无 实际 内 容 ; 有 些 Web 站 点 只 重视 提供 信息 ,但 界面 却 显得 呆板 .乏味 ,等 
等 ,因此 必须 精心 安排 和 组 织 页 面 。 一 个 成 功 的 网 页 应 包含 Web 站 点 名 称 、Web 站 点 徽 
标 、 网 页 标题 \ 网 页 内 容 、 指 向 主页 的 链接 、 指 向 其 他 网 页 的 链接 、 版 权 陈述 、Web 站 点 的 
E-mail 地 址 和 其 他 联系 方法 等 基本 要 素 。 

一 个 网 页 的 长 度 一 般 应 控制 在 2 页 到 3 页 (一 页 即 显示 器 的 一 屏 ) 的 篇 幅 内 , 太 短 则 无 
法 容纳 足够 的 信息 , 太 长 则 使 网 页 下 载 的 时 间 变 长 ,可 能 会 使 人 们 失去 耐心 而 转向 其 他 
Web 站 点 ,也 会 使 人 们 因为 长 长 的 网 页 拖 动 滚动 条 而 搞 得 尝 头 转向 。 

在 进行 网 页 的 版 面 设 计时 应 注意 页 面 的 简洁 性 和 高 效 性 ,让 人 们 易于 找到 所 关心 的 信 
息 , 不 要 让 精美 的 动画 和 花哨 的 图 片 喧 宾 夺 主 。Web 站 点 应 确定 一 个 主 色调 和 一 个 统一 的 
字体 风格 、 图 素 风 格 等 。 所 有 的 网 页 都 要 采用 这 个 主 色 调和 风格 。 颜 色 搭配 要 协调 ,过 于 繁 
多 和 凌乱 的 颜色 会 使 人 们 感到 无 所 适 从 。 页 面 布局 采用 框架 结构 还 是 采用 表格 方式 应 根据 
实际 情况 确定 。 框 架 结构 是 将 整个 屏幕 分 成 若干 个 小 区 域 ,每 一 区 域 可 以 显示 不 同 的 网 页 ， 
单 击 某 一 区 域 上 的 超 链接 除了 可 以 在 本 区 域 显 示 另 一 页 面 外 ,还 可 在 另外 一 个 区 域 显 示 对 
应 此 超 链接 的 页 面 文档 ,而 其 他 区 域 的 页 面 不 必 重 新 下 载 ,唯一 不 便 之 处 是 对 于 不 同 的 浏览 
器 可 能 显示 的 结果 不 会 完全 一 致 。 目 前 很 多 Web 站 点 采用 表格 方式 来 布局 页 面 ,虽然 每 次 
访问 均 须 下 载 整个 页 面 ,但 主要 解决 了 浏览 器 的 兼容 问题 。 页 面 中 采用 导航 条 可 以 使 人 们 
在 浏览 页 面 时 不 会 迷失 方向 。 导 航 条 实际 上 就 是 一 组 超 链接 , 它 告 诉 人 们 目前 所 在 的 位 置 ， 
可 以 使 人 们 既 快 又 容易 地 转向 Web 站 点 的 其 他 主要 页 面 。 

在 设计 Web 站 点 时 还 应 注意 以 下 几 点 : 抓 住 能 传达 主要 信息 的 字眼 作为 超 链接 ; 图 像 
或 图 形 的 超 链接 应 配 以 文字 说 明 , 以 便 人 们 关闭 图 形 显示 时 可 以 看 文字 说 明 ; 不 要 在 短小 
的 网 页 中 提供 太 多 的 超 链接 ; 注意 超 链 接 文本 的 颜色 应 该 与 普通 文本 的 颜色 有 所 区 别 。 通 
常 采用 层 琶 样式 单 (CSS) 来 保持 页 面 的 字体 .字体 颜色 .背景 ,边框 ,文本 属性 等 风格 的 
一 致 。 

5. Web 站 点 开发 和 运行 环境 的 确定 

根据 站 点 运行 的 实际 情况 确定 Web 站 点 的 运行 环境 。Web 站 点 运行 的 操作 系统 目前 
主流 有 两 种 : Windows 系统 和 Linux 系统 。 究 竞选 用 哪 一 种 操作 系统 都 无 关 紧 要 ,一 般 认 
为 选用 Linux 系统 在 网 络 安 全 性 方面 要 比 Windows 系统 要 好 ,但 这 并 不 意味 着 Linux 不 存 
在 安全 性 问题 。 若 选择 Windows 阵营 ,对 于 一 般 性 Web 站 点 比较 理想 的 运行 环境 是 
Windows Server 2008 操作 系统 十 IIS 7.0 Web 服务 器 十 Microsoft SQL Server 2005/2008 数据 
库 服务 器 。 就 开发 平台 而 言 ,Java EE 和 . NET 开发 平台 各 领 风骚 ,一 般 认 为 用 Java 平台 
发 的 站 点 其 安全 性 和 运行 效率 要 优 于 . NET 平台 开发 的 站 点 。 但 Java 平台 提倡 开源 ,工具 
的 多 样 性 和 复杂 性 造成 对 开发 者 的 要 求 很 高 ,增加 了 开发 难度 和 系统 的 维护 成 本 ,而 . NET 
则 易于 学 习 和 使 用 ,站 点 易于 实现 ,系统 维护 成 本 低 。 

6. Web 站 点 的 开发 

Web 站 点 的 开发 涉及 项 目 负责 人 设计 人 员 ,程序 员 、 网 页 制作 人 员 和 美工 等 。 其 中 项 
目 负 责 人 负责 站 点 内 容 的 总 体 设计 、 进 度 和 人 员 安 排 等 ; 设计 人 员 负 责 站 点 页 面 布局 和 整 
个 站 点 程序 的 设计 数据 库 设 计 等 工作 ; 程序 员 主 要 负责 服务 器 端 程序 开发 等 ; 网 页 制作 
人 员 负 责 开 发 网 页 工作 等 ; 美工 人 员 则 负责 制作 动画 和 图 片 ,并 嵌入 到 网 页 中 去 。 
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通过 Dreamweaver、VS 2010 等 工具 来 建设 Web 站 点 可 大 大 提高 工作 效率 。 目 前 在 
Windows 系统 下 建立 Web 站 点 的 最 好 工具 还 是 VS 2010, 它 是 一 个 集成 的 开发 平台 。 但 
VS 2010 中 的 页 面 生成 工具 功能 相对 较 弱 ,因此 结合 Dreamweaver 强大 的 页 面 文档 生成 
器 ,进行 Web 站 点 的 开发 是 相当 方便 的 。 例 如 在 Dreamweaver 中 ,提供 了 大 量 的 自动 生成 
页 面 脚本 程序 的 功能 ,利用 它 将 生成 的 脚本 程序 粘贴 到 VS 2010 中 可 节约 很 多 时 间 。 建 设 
Web 站 点 过 程 中 掌握 VBScript 或 JavaScript 脚本 语言 的 使 用 是 必需 的 ,这 些 脚 本 语言 又 区 
分 为 客户 端 运行 的 脚本 和 服务 器 端 运行 的 脚本 。 只 有 灵活 使 用 这 些 脚 本 语言 , 才 可 以 开发 
出 活泼 ,动态 的 交互 式 动态 HTML 页 面 。 

7. Web 站 点 的 测试 

在 Web 站 点 开发 过 程 中 ,网 站 测试 是 保证 整体 项 目 质量 的 重要 一 环 。 当 把 各 个 网 页 整 
合成 网 站 后 ,要 对 整个 网 站 进行 测试 。 看 其 是 否 能 够 正常 运行 ,并 将 其 中 的 运行 错误 加 以 修 
改 。 主 要 测试 内 容 有 : 功能 测试 和 性 能 测试 .安全 性 测试 .稳定 性 测试 .浏览 器 兼容 性 测试 、 
链接 测试 等 。 可 通过 一 些 专业 工具 来 检查 链接 错误 , 找 出 网 页 制作 中 存在 的 各 种 问题 。 

8. 将 Web 站 点 接 入 Internet, 并 做 好 网 站 推广 

Web 站 点 开发 成 功 后 ,需要 将 其 放 到 Internet 网 上 作为 一 个 网 络 结 点 供用 户 访问 。 根 
据 情 况 , 可 选择 虚拟 主机 方式 .服务 器 租用 或 托管 方式 .铺设 专线 方式 来 接 通 Internet, 供 人 
们 访问 。 

虚拟 主机 是 使 用 特殊 的 软 硬 件 技术 ,把 一 台 计 算 机 主机 分 成 多 人 台 “ 虚 拟 ” 的 主机 ,每 一 台 
虚拟 主机 都 具有 独立 的 域名 和 IP 地 址 (或 共享 的 IP 地 址 ) 且 有 完整 的 Internet 服务 器 ( 包 
括 WWW、FTP、E-mail 等 服务 ) 功 能 。 在 这 种 模式 下 ,同一 台 硬 件 、 同 一 个 操作 系统 之 上 ， 
运行 着 为 多 个 用 户 启动 的 不 同 的 服务 器 程序 , 且 互 不 干扰 ; 而 各 个 用 户 又 拥有 自己 的 系统 
资源 (IP 地 址 ,文件 存储 空间 、 内 存 .CPU 时 间 等 )。 虚 拟 主机 之 间 完 全 独立 ,并 可 由 用 户 自 
行 管理 。 在 外 界 看 来 ,每 一 台 虚 拟 主机 和 一 台独 立 的 主机 完全 一 样 。 使 用 网 络 公司 的 “虚拟 
主机 ”服务 ,就 是 在 别人 的 主机 上 租用 一 定 的 网 站 空间 以 架设 自己 的 网 站 。 网 络 公 司 不 仅 可 
以 为 客户 提供 存放 网 页 的 空间 ,同时 也 可 以 开设 数目 不 定 的 电子 邮件 账号 。 使 用 虚拟 主机 
可 以 节省 购买 相关 软 硬 件 设 施 的 费用 ,而 且 公司 也 无 须 招 聘 或 培训 更 多 的 专业 人 员 ,因而 其 
成 本 很 低 , 但 虚拟 主机 只 适合 于 一 些小 型 的 、 结 构 较 简单 的 网 站 。 

服务 器 租用 或 托管 方式 就 是 在 租 来 的 或 自 备 的 服务 器 上 安装 和 配置 好 Web 站 点 ,然后 
安放 到 一 些 专门 的 网 络 服务 机 构 ,每 年 支付 一 定数 额 的 费用 ,通过 远程 登录 方式 进行 站 点 维 
护 。 这 种 方式 适合 于 较 大 型 的 网 站 。 目 前 很 多 网 站 都 是 采用 这 种 方式 。 

专线 上 网 方式 就 是 将 站 点 服务 器 安放 在 企业 内 部 ,通过 专线 连接 互联 网 。 这 种 方式 成 
本 最 高 。 线 路 租用 费 是 一 笔 很 大 的 费用 。 

对 于 商业 Web 站 点 ,正式 开通 后 ,并 不 代表 就 大 功 告 成 了 ,必须 实施 推广 活动 。 如 何 宣 
传 自 己 的 Web 站 点 就 成 为 Web 站 点 能 否 发 挥 其 作用 的 关键 所 在 。 站 点 推广 是 指 通过 各 种 
有 效 的 手段 提高 Web 站 点 知名 度 ,提升 Web 站 点 访问 量 。 推 广 活动 有 长 期 和 短期 的 ; 有 
无 偿 的 和 有 偿 的 ; 有 费用 高 的 和 费用 低 的 ,当然 效果 也 有 所 不 同 。 比 较 简 单 的 是 通过 群发 
邮件 、 在 各 大 论坛 注册 后 讨论 .让 搜索 引擎 帮忙 等 方式 来 推广 ,在 这 方面 使 用 一 些 适 当 的 技 
巧 ,可 以 得 到 百倍 于 投入 的 收益 。 
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9. Web 站 点 的 运行 安全 和 维护 管理 

涉及 Web 站 点 的 安全 性 方面 的 问题 比较 多 ,主要 包括 : 身份 窃取 数据 窃取 ,假冒 、 非 
授权 存 取 、 错 误 路 由 、 和 否认 、 拒 绝 服务 ,等 等 。 在 站 点 服务 器 上 要 保证 操作 系统 的 漏洞 及 时 得 
到 修复 ,精心 配置 Web 服务 器 .邮件 服务 器 数据库 服务 器 的 各 项 参数 设置 。 本 章 后 面 将 详 
细 讨 论 Web 站 点 的 安全 性 。Web 站 点 的 维护 和 管理 包括 服务 器 的 维护 、 站 点 程序 的 维护 、 
内 容 的 更 新 和 信息 的 发 布 等 。 主 要 工作 包括 要 对 存在 的 问题 进行 修改 ,对 Web 站 点 内 容 进 
行 更 新 或 修改 、 及 时 清除 一 些 垃圾 页 面 或 图 片 、 对 数据 库 进行 备份 等 。 


8.7 Web 站 点 性 能 优化 


Web 用 户 总 是 希望 在 当前 网 络 带宽 情况 下 ,所 访问 的 网 站 响应 速度 足够 快 ,能 够 很 快 
找到 所 关心 的 信息 。 对 Web 站 点 提供 者 来 说 , 则 要 求 Web 站 点 能 够 容纳 更 多 访问 者 ,同时 
保持 用 户 的 高 速 访问 性 能 。 而 当 一 个 站 点 访问 用 户 过 多 时 ,服务 器 会 超载 ,站 点 速度 也 会 随 
之 降低 。 增 加 服务 器 和 扩充 内 存 并 运用 负载 均衡 或 群集 方案 ,可 增加 Web 站 点 访问 量 ,大 
大 提高 站 点 的 性 能 ,但 硬件 和 维护 成 本 也 会 大 大 增加 , 且 可 能 Web 用 户 可 以 获得 较 快 的 访 
问 速 度 , 但 预期 的 访问 量 却 达 不 到 ,造成 资源 浪费 。 因 此 应 首先 考虑 通过 优化 Web 服务 器 
配置 改善 Web 应 用 程序 的 性 能 来 提高 整个 站 点 的 访问 性 能 。 


8.7.1 优化 Web 服务 器 硬 、 软 件 配置 


使 用 快速 的 磁盘 和 好 的 网 络 存 取 机 制 ,能 明显 改进 Web 站 点 访问 速度 。 可 以 运用 特定 
网 卡 ( 如 Akamba 公司 的 Velobahn) 来 改进 服务 器 的 速度 ,或 是 采用 相关 技术 优化 网 络 接口 
卡 的 性 能 。 这 类 网 卡 可 减轻 Web 服务 器 CPU 的 负荷 ,使 其 从 繁琐 的 网 络 协议 处 理 中 解脱 
出 来 ,而 集中 于 页 面 处 理 和 服务 提供 。 可 以 为 Web 服务 器 增加 反 向 缓冲 代理 ,使 服务 器 能 
够 顺利 实现 已 创建 页 面 的 传输 ,同时 在 创建 动态 页 面 过程 中 减轻 服务 器 负荷 。 可 以 通过 对 
数据 库 服务 器 和 Web 服务 器 的 配置 从 缓冲 `. 压 缩 ` 带 宽 限 制 、 进 程 限制 等 方面 提高 Web 站 
点 的 性 能 。 


8.7.2 改善 Web 应 用 程序 的 性 能 


Web 站 点 的 性 能 除了 和 网 络 状况 、 硬 件 配置 相关 外 ,还 有 一 点 不 容 忽 视 , 就 是 和 Web 
开发 人 员 的 开发 水 平 有 关 。 为 提高 站 点 的 访问 性 能 , Web 开发 人 员 应 注意 以 下 方面 的 问题 
(以 开发 ASP. NET 应 用 程序 为 例 ) 。 

1. 帮 有 页 面 "减肥 ” 

我 们 在 浏览 网 页 时 实际 上 是 将 Web 站 点 的 网 页 内 容 下载 到 本 地 硬盘 ,再 用 浏览 器 解释 
查看 的 。 下 载 网 页 的 快慢 在 显示 速度 上 占 了 很 大 比重 ,所 以 网 页 本 身 所 占 的 空间 越 小 ,那么 
浏览 速度 就 会 越 快 。 这 就 要 求 在 做 网 页 的 时 候 遵循 一 切 从 简 的 原则 ,如 : 不 要 使 用 太 大 的 
Flash 动画 、 图 片 等 资源 ; 设法 减少 GIF 文件 对 颜色 的 使 用 ,并 调整 JPEG 文件 大 小 ; 删除 
页 面 中 无 用 的 符号 ,例如 空格 和 不 必要 的 注解 ,等 等 。 目 前 有 很 多 网 页 减肥 器 软件 可 以 帮助 
减少 网 页 的 大 小 。 
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2. 尽量 使 用 静态 HTML 页 面 

ASP/ASP.NET、PHP、JSP 等 程序 实现 了 网 页 信息 的 动态 交互 ,运行 起 来 的 确 非常 方 
便 , 因 为 它们 的 数据 交互 性 好 ,能 很 方便 地 存 取 、 更 改 数 据 库 的 内 容 , 使 Web 站 点 动 起 来 。 
但 这 类 程序 必须 先 由 服务 器 执行 处 理 后 ,生成 HTML 页 面 ,然后 再 送 往 客 户 端 浏 览 ,这 就 
不 得 不 耗费 一 定 的 服务 器 资源 。 如 果 在 Web 站 点 上 过 多 地 使 用 这 类 程序 ,网 页 显示 速度 肯 
定 会 慢 , 所 以 应 尽量 使 用 静态 的 HTML 页 面 。 

3. 切忌 将 整个 页 面 内 容 塞 到 一 个 Table 中 

网 页 设计 中 ,有 些 开 发 者 为 追求 页 面 的 统一 对 齐 , 将 整个 页 面 的 内 容 都 塞 进 了 一 个 
Table 里 ,然后 再 由 单元 格 td 来 划分 各 个 块 的 布局 ,这 种 Web 站 点 的 显示 速度 是 绝对 慢 的 。 
因为 Table 要 等 里 面 所 有 的 内 容 都 加 载 完 毕 后 才 显 示 出 来 的 ,如 果 某 些 内 容 无 法 访问 ,就 会 
拖延 整个 页 面 的 访问 速度 。 正 确 的 做 法 是 将 内 容 分 割 到 几 个 具有 相同 格局 的 Table 中 去 ， 
不 要 全 都 塞 到 一 个 Table 里 。 

4. 将 ASP/ASP.NET、JSP、PHP 等 文件 的 访问 改 为 js 文件 引用 

在 需求 中 经 常会 遇 到 这 样 的 问题 : 在 站 点 的 首页 上 需要 显示 数据 库 中 存放 的 最 新 的 几 
条 新 闻 信 息 标 题 ,以 便 人 们 点 击 新 闻 标 题 查看 ,于 是 开发 人 员 就 将 首页 变 成 动态 服务 器 页 
面 ,在 其 中 加 入 ASP/ASP. NET、JSP、PHP 程序 来 连接 数据 库 、 访 问 数据 库 以 获取 新 闻 标 
题 。 这 样 做 从 功能 上 说 没有 任何 问题 ,问题 是 每 一 个 访问 网 站 的 人 都 要 让 Web 服务 器 连接 
数据 库 获取 数据 , 当 用 户 数 较 多 的 情况 下 ,Web 站 点 的 响应 速度 会 很 慢 。 数 据 库 中 的 新 闻 
信息 的 变更 一 般 来 说 会 通过 后 台新 闻 发 布 系统 来 更 新 ,如 果 我 们 在 后 台 每 发 布 一 个 新 闻 的 
时 候 ,在 动态 服务 器 页 面 中 ,自动 生成 一 个 js 文件 ,将 新 闻 标 题 以 超 链接 的 方式 用 
JavaScript 语言 写 好 ,例如 : 


//mynews. js 文件: 
document. writeln("<A href = 'getnews.aspx?newid = 10101 > 新 闻 标 题 1 </A>"); 
document. writeln("<A href = 'getnews. aspx?newid = 10102 > 新 闻 标 题 2</A>"); 
document. writeln("<A href = 'getnews. aspx?newid = 10103 > 新 闻 标 题 3</A>"); 
document. close( ); 


然后 在 首页 放 管 新 闻 标 题 的 地 方 通过 二 SCRIPT src 二 "mynews. js 文件 "二 
二 /SCRIPT 二 这 样 的 代码 来 引用 该 js 文件 ,就 可 以 将 首页 变 成 一 个 静态 HTML 页 面 ,而 不 
是 动态 服务 器 页 面 ,这 样 就 会 大 大 提高 首页 的 访问 速度 。 

5. 使 用 iframe 贬 套 另 一 页 面 

如 果 你 要 在 Web 站 点 上 插入 一 些 广告 代码 ,又 不 想 让 这 些 广告 影响 Web 站 点 的 速度 
的 话 ,那么 ,使 用 iframe 最 合适 不 过 了 。 方 法 是 将 这 些 广告 代码 放 到 一 个 独立 的 页 面 去 , 然 
后 在 首页 用 如 下 的 代码 将 该 页 面 嵌 入 即 可 ,这 样 就 不 会 因为 广告 页 面 的 延迟 而 拖累 整个 首 
页 的 显示 ,代码 如 下 : 


< iframe align = "center" width = "780" height = "30" name = "all" scrolling= "no" marginWidth= 0 
frameborder = "0" src= "页 面 URL"></iframe> 
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6. 站 点 计数 器 的 放置 位 置 

应 将 站 点 访问 计数 器 放 到 页 面 代码 的 最 下 方 , 防 止 由 于 某 种 原因 所 引起 的 服务 器 超时 
延迟 ,导致 页 面 很 长 时 间 才 能 访问 。 

7. 数据 库 的 连接 和 关闭 

访问 数据 库 资 源 需要 创建 连接 .打开 连接 和 关闭 连接 几 个 操作 。 这 些 过 程 需要 多 次 与 
数据 库 交 换 信 息 以 通过 身份 验证 ,比较 耗费 服务 器 资源 。 于 是 ASP. NET 中 提供 了 连接 池 
(Connection Pool) 来 改善 打开 和 关闭 数据 库 对 性 能 的 影响 。 系 统 将 用 户 的 数据 库 连 接 放 在 
连接 池 中 ,需要 时 取出 ,关闭 时 收回 连接 ,等 待 下 一 次 的 连接 请 求 。 连 接 池 的 大 小 是 有 限 的 ， 
如 果 在 连接 池 达 到 最 大 限度 后 仍 要 求 创建 连接 ,必然 大 大 影响 性 能 。 因 此 ,在 建立 数据 库 连 
接 后 只 有 在 真正 需要 操作 时 才 打开 连接 ,使 用 完毕 后 马上 关闭 ,从 而 尽量 减少 数据 库 连 接 打 
开 的 时 间 ,避免 出 现 超出 连接 限制 的 情况 。 

8. 尽量 使 用 存储 过 程 

存储 过 程 是 存储 在 服务 器 上 的 一 组 预 编译 的 SQL 语句 ,类 似 于 DOS 系统 中 的 批 处 理 
文件 。 存 储 过 程 具有 对 数据 库 立 即 访问 的 功能 ,信息 处 理 极为 迅速 。 使 用 存储 过 程 可 以 避 
免 对 命令 的 多 次 编译 ,在 执行 一 次 后 其 执行 规划 就 驻 留 在 高 速 缓存 中 ,以 后 需要 时 只 需 直接 
调用 缓存 中 的 二 进 制 代 码 即 可 。 另 外 存储 过 程 在 服务 器 端 运行 ,独立 于 ASP. NET 程序 ， 
便于 修改 ,最 重要 的 是 它 可 以 减少 数据 库 操作 语句 在 网 络 中 的 传输 。 

9. 优化 查询 语句 

ASP. NET 中 ADO 连接 消耗 的 资源 相当 大 ,SQL 语句 运行 的 时 间 越 长 ,占用 系统 资源 
的 时 间 也 越 长 。 因 此 ,应 尽量 使 用 优化 过 的 SQL 语句 以 减少 执行 时 间 。 比 如 不 在 查询 请 句 
中 包含 子 查 询 语句 、 充 分 利用 索引 等 。 

10. ASP. NET 中 的 编程 注意 事项 

此 外 ,在 ASP. NET 编程 中 注意 如 下 问题 ,可 以 提高 Web 站 点 的 访问 性 能 。 

(1) 选择 适合 的 数据 查看 机 制 。 根 据 你 选择 在 Web 窗 体 页 显示 数据 的 方式 ,在 便利 和 
性 能 之 间 常 常 存在 着 重要 的 权衡 。 例 如 ,Gridview Web 控件 可 能 是 一 种 显示 数据 的 方便 快 
捷 的 方法 ,但 就 性 能 而 言 , 它 的 开销 常常 是 最 大 的 。Repeater Web 控件 是 便利 和 性 能 的 折 
囊 , 它 高 效 、. 可 自 定 义 且 可 编程 。 

(2) 采用 Server. Transfer 重 定向 页 面 。 在 页 面 中 使 用 该 方法 可 避免 不 必要 的 客户 端 
重 定向 。 

(3) 在 部 署 Web 站 点 时 ,不 要 启用 调试 模式 。 否 则 应 用 程序 的 性 能 可 能 会 受到 非常 大 
的 影响 。 不 要 禁用 Web 窗 体 页 的 缓冲 ,否则 会 导致 大 量 的 性 能 开销 。 

(4) 将 SqlDataReader 类 用 于 快速 只 进 数 据 游 标 。SqlDataReader 类 提供 了 一 种 读 取 
从 SQL Server 数据 库 检 索 的 只 进 数据 流 的 方法 。 它 提供 比 DataSet 类 更 高 的 性 能 。 

(5) 字符 串 操作 性 能 优化 。 使 用 值 类 型 的 ToString 方法 可 以 避免 装 箱 操作 ,从 而 提高 
应 用 程序 性 能 。 使 用 “十 ”号 连接 字符 串 时 由 于 涉及 不 同 的 数据 类 型 ,数字 需要 通过 装 箱 操 
作 转 化 为 引用 类 型 才 可 以 添加 到 字符 串 中 ,但 装 箱 操作 对 性 能 影响 较 大 。 在 处 理 字符 串 时 ， 
最 好 使 用 StringBuilder 类 ,其 . NET 命名 空间 是 System. Text。 该 类 并 非 创 建新 的 对 象 ,而 
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是 通过 Append、Remove Insert 等 方法 直接 对 字符 串 进行 操作 ,通过 ToString 方法 返回 操 
作 结 果 。 


int num; 

System. Text. StringBuilder str = new System. Text. StringBuilder(); // 创 建 字符 串 
str.Rppend(num. ToString( )); // 添 加 数值 num 
Response. Write( str. ToSstring); // 显 示 操 作 结 果 


(6) 应 考虑 编译 运行 Web 应 用 程序 。 应 尽量 避免 更 改 应 用 程序 的 \bin 目录 中 的 程序 
集 。 更 改 页 面 会 导致 重新 分 析 和 编译 该 页 ,而 替换 \bin 目录 中 的 程序 集 则 会 导致 完全 重新 
批 编译 该 目录 。 在 包含 许多 页 面 的 大 规模 站 点 上 ,更 好 的 办 法 可 能 是 根据 计划 替换 页 面 或 
程序 集 的 频繁 程度 来 设计 不 同 的 目录 结构 。 不 常 更 改 的 页 面 可 以 存储 在 同一 目录 中 并 在 特 
定 的 时 间 进行 预 批 编译 。 经 常 更 改 的 页 面 应 在 它们 自己 的 目录 中 以 便 快 速 编译 。 

(7) 不 要 依赖 代码 中 的 异常 。 异 常会 大 大 地 降低 性 能 ,所 以 不 应 将 它们 用 作 控 制 正常 
程序 流程 的 方式 。 如 果 有 可 能 检测 到 代码 中 可 能 导致 异常 的 状态 ,请 执行 这 种 操作 。 不 要 
在 处 理 该 状态 之 前 捕获 异常 本 身 。 请 比较 下 面 的 代码 ,两 者 产生 相同 的 结果 。 

try 

{ result = 100/num; } 

catch (Exception e) 

{result = 0; } 

// change to this: 


if (num != 0) result = 100 / num; 
else result = 0; 


(8) 只 在 必要 时 保存 服务 器 控件 视图 状态 。 自 动 视图 状态 管理 是 服务 器 控件 的 功能 ， 
该 功能 使 服务 器 控件 可 以 在 往返 过 程 上 重新 填充 它们 的 属性 值 (你 不 需要 编写 任何 代码 )。 
但 是 ,因为 服务 器 控件 的 视图 状态 在 隐藏 的 窗 体 字段 中 往返 于 服务 器 ,所 以 该 功能 确实 会 对 
性 能 产生 影响 。 你 应 该 知道 在 哪些 情况 下 视图 状态 会 有 所 帮助 ,在 哪些 情况 下 它 会 影响 页 
的 性 能 。 例 如 ,如 果 你 将 服务 器 控件 绑 定 到 每 个 往返 过 程 上 的 数据 , 则 将 用 从 数据 绑 定 操作 
获得 的 新 值 替换 保存 的 视图 状态 。 在 这 种 情况 下 ,禁用 视图 状态 可 以 节省 处 理 时 间 。 

默认 情况 下 ,为 所 有 服务 器 控件 启用 视图 状态 。 若 要 禁用 视图 状态 ,请 将 控件 的 
EnableViewState 属性 设置 为 false, 如 下 面 的 DataGrid 服务 器 控件 示例 所 示 。 


<asp:gridview EnableViewState = "false" datasource = "..." runat = "server"/> 


还 可 以 使 用 @ Page 指令 禁用 整个 页 的 视图 状态 。 当 你 不 从 页 面 回 发 到 服务 器 时 ,这 
将 十 分 有 用 : 


<% @ Page EnableViewState = "false"” %> 


注意 : @Control 指令 中 也 支持 EnableViewState 属性 ,该 指令 允许 你 控制 是 否 为 用 户 
控件 启用 视图 状态 。 若 要 分 析 页 上 服务 器 控件 使 用 的 视图 状态 的 数量 ,请 (通过 将 trace 一 
"true" 属性 包括 在 @Page 指令 中 ) 启 用 该 页 的 跟踪 并 查看 Control Hierarchy 表 的 
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Viewstate 列 。 

(9) 避免 到 服务 器 的 不 必要 的 往返 过 程 。 通 常 只 有 在 查询 或 存储 数据 时 才 需 要 启动 到 
服务 器 的 往返 过 程 。 多 数 数据 操作 可 在 这 些 往返 过 程 间 的 客户 端 上 进行 。 例 如 ,从 HTML 
窗 体验 证 用 户 输入 可 在 数据 提交 到 服务 器 之 前 在 客户 端 进行 。 如 果 不 需 要 将 信息 传递 到 服 
务 器 并 将 其 存储 在 数据 库 中 ,那么 你 不 应 该 编写 导致 往返 过 程 的 代码 。 

(10) 使 用 Page. IsPostBack 避免 执行 不 必要 的 处 理 。 例 如 下 面 的 演示 代码 中 在 首次 请 
求 该 页 时 将 数据 绑 定 到 GridView Web 控件 中 ,以 后 刷新 该 页 将 不 再 绑 定 。 


void Page_Load(Object sender, EventArgs e) 

{ 

// Set up a connection and command here. 

if (!Page. IsPostBack) 

{ 

String query = "select * from Authors where FirstName like'% Tim% '"; 
myCommand. Fill(ds, "Authors"); 

myGridView. DataBind( ); 

4 


由 于 每 次 请 求 时 都 执行 Page_Load 事件 ,上 述 代码 检查 IsPostBack 属性 是 否 设置 为 
false。 如 果 是 , 则 执行 代码 。 如 果 该 属性 设置 为 true, 则 不 执行 代码 。 

(11) 当 不 使 用 会 话 状态 时 禁用 它 。 并 不 是 所 有 的 应 用 程序 或 页 都 需要 针对 于 具体 用 
户 的 会 话 状态 ,应 该 对 任何 不 需要 会 话 状态 的 应 用 程序 或 页 禁用 会 话 状 态 。 若 要 禁用 页 的 
会 话 状态 ,请 将 @Page 指令 中 的 EnableSessionState 属性 设置 为 false。 例 如 : 


<%@ Page EnableSessionState = "false" %> 


注意 : 如 果 页 需要 访问 会 话 变量 ,但 不 打算 创建 或 修改 它们 , 则 将 @Page 指令 中 的 
EnableSessionState 属性 设置 为 ReadOnly。 若 要 禁用 应 用 程序 的 会 话 状 态 ,请 在 应 用 程序 
Web. config 文件 的 sessionstate 配置 节 中 将 mode 属性 设置 为 off。 例 如 : 


< sessionstate mode = "off"/> 


(12) 仔细 选择 会 话 状 态 提 供 程 序 。ASP. NET 为 存储 应 用 程序 的 会 话 数据 提供 了 3 种 
不 同 的 方法 : 进程 内 会 话 状态 、 作 为 Windows 服务 的 进程 外 会 话 状态 和 SQL Server 数据 
库 中 的 进程 外 会 话 状 态 。 每 种 方法 都 有 自己 的 优点 ,但 进程 内 会 话 状态 是 迄今 为 止 速度 最 
快 的 解决 方案 。 如 果 只 在 会 话 状态 中 存储 少量 易 失 数据 , 则 建议 使 用 进程 内 提供 程序 。 进 
程 外 解决 方案 主要 用 于 跨 多 个 处 理 器 或 多 个 计算 机 应 用 程序 ,或 者 用 于 服务 器 或 进程 重新 
启动 时 不 能 丢失 数据 的 情况 。 

(13) 不 使 用 不 必要 的 Web 服务 器 控件 。ASP. NET 中 ,大 量 的 服务 器 端 控件 方便 了 
程序 开发 ,但 也 可 能 带 来 性 能 的 损失 ,因为 用 户 每 操作 一 次 服务 器 端 控 件 , 就 产生 一 次 与 服 
务 器 端的 往返 过 程 。 因 此 除非 必要 ,应 当 少 使 用 服务 器 端 控件 。 

(14) 优化 Web 服务 器 配置 文件 。 默 认 情 况 下 ,ASP. NET 配置 被 设置 成 启用 最 广泛 的 
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功能 并 尽量 适应 最 常见 的 方案 。 因 此 ,应 用 程序 开发 人 员 可 以 根据 应 用 程序 所 使 用 的 功能 ， 
优化 和 更 改 其 中 的 某 些 配置 ,以 提高 应 用 程序 的 性 能 。 应 仅 对 需要 的 应 用 程序 启用 身份 验 
证 。 默 认 情 况 下 的 身份 验证 模式 为 Windows。 大 多 数 情 况 下 ,对 于 需要 身份 验证 的 应 用 
程序 ,最 好 在 Machine. config 文件 中 禁用 身份 验证 ,并 在 Web. config 文件 中 启用 身份 

根据 适当 的 请 求 和 响应 编码 设置 来 配置 应 用 程序 。ASP. NET 默认 编码 格式 为 UTF-8。 
如 果 你 的 应 用 程序 为 严格 的 ASCII, 请 配置 应 用 程序 使 用 ASCII 以 获得 稍 许 的 性 能 提高 。 

在 Machine. config 文件 中 将 AutoEventWireup 属性 置 为 false, 意 味 着 页 面 不 将 方法 
名 与 事件 进行 匹配 并 将 两 者 挂钩 (例如 Page_Load)。 如 果 页 面 开 发 人 员 要 使 用 这 些 事件 ， 
需要 在 基 类 中 重 写 这 些 方 法 (例如 需要 为 页 面 加 载 事 件 重 写 Page_OnLoad, 而 不 是 使 用 
Page_Load 方法 ) 。 禁 用 AutoEventWireup ,页 面 会 将 事件 连接 留 给 页 面 作者 而 不 是 自动 执 
行 它 ,这 也 将 获得 稍 许 的 性 能 提升 。 

(15) 缓存 数据 和 页 面 输出 。 适 当 使 用 缓存 可 以 更 好 地 提高 站 点 的 性 能 ,有 时 这 种 提高 
是 非常 明显 的 。 使 用 ASP. NET 缓存 机 制 需要 注意 两 点 : 首先 不 要 缓存 太 多 项 ,缓存 每 个 
项 均 有 开销 ,特别 是 在 内 存 使 用 方面 ,不 要 缓存 容易 重新 计算 和 很 少 使 用 的 项 。 其 次 给 缓存 
的 项 分 配 的 有 效 期 不 要 太 短 。 很 快 到 期 的 项 会 导致 缓存 中 不 必要 的 周转 ,并 且 经 常 导致 更 
多 的 代码 清除 和 垃圾 回收 工作 。 若 关心 此 问题 ,请 监视 与 ASP. NET Applications 性 能 对 
象 关 联 的 Cache Total Turnover Rate 性 能 计数 器 。 高 周转 率 说 明 可 能 存在 问题 ,特别 是 当 
项 在 到 期 前 被 移 除 时 。 这 也 称 作 内 存 压 力 。 

11. ASP.NET 应 用 程序 性 能 测试 

在 对 ASP.NET 应 用 程序 进行 性 能 测试 之 前 ,应 确保 应 用 程序 没有 错误 ,而 且 功能 正 
常 。 性 能 测试 工具 Web Application Stress Tool(WAS) 是 Microsoft 发 布 的 一 个 免费 测试 
工具 。 它 可 以 模拟 成 百 上 千 个 用 户 同时 对 Web 应 用 程序 进行 访问 请 求 ,在 服务 器 上 形成 流 
量 负载 ,从 而 达到 测试 的 目的 ,可 以 生成 平均 TTFB, 平 均 TTLB 等 性 能 汇总 报告 。 另 一 个 
性 能 测试 工具 Application Center Test(ACT) 附 带 在 Microsoft Visual Studio. NET 的 企业 
版 中 ,是 正式 支持 Web 应 用 程序 的 测试 工具 , 它 能 够 直观 地 生成 图 表 结 果 , 功 能 比 WAS 
多 ,但 不 具备 多 个 客户 机 同时 测试 的 能 力 。 服 务 器 操作 系统 “管理 工具 ”中 的 “性 能 ”计数 器 ， 
可 以 对 服务 器 进行 监测 以 了 解 应 用 程序 性 能 。 

对 于 Web 站 点 开发 人 员 来 说 ,在 编写 ASP. NET 应 用 程序 时 注意 性 能 问题 , 养 成 良好 
的 习惯 ,可 提高 应 用 程序 的 性 能 。 


8.8 Web 站 点 的 安全 性 


计算 机 安全 性 涉及 的 范围 非常 广泛 。 本 节 主 要 讨论 如 何 保证 Web 站 点 安全 运行 的 
一 般 性 方法 。Web 站 点 安全 性 可 从 Web 服务 器 的 安全 ,数据库 服务 器 的 安全 、Web 站 点 
应 用 程序 的 安全 3 个 方面 来 考虑 。 基 于 不 同 的 环境 配置 的 Web 解决 方案 ,其 安全 考虑 各 
有 侧重 ,但 基本 原则 大 致 相同 。 下 面 我 们 以 Windows 平台 为 例 来 讨论 Web 站 点 的 安全 
问题 。 
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8.8.1 在 安装 IIS 7.0 的 服务 器 上 应 考虑 的 安全 问题 


(1) 采用 NTFS 分 区 ; 尽 可 能 安装 操作 系统 的 最 新 服务 包 和 修补 程序 ; 增强 口令 的 安 
全 性 ; 在 网 络 配置 中 禁用 WINS、NETBIOS、LMHOST( 用 于 IP 地 址 与 Windows 计算 机 名 
称 的 映射 ); 停 掉 或 印 载 不 必要 的 进程 或 服务 。 

(2) 将 磁盘 上 的 默认 Web 站 点 位 置 从 c:\inetpub\ 更 改 到 其 他 位 置 。 

(3) 使 用 JIS 锁定 工具 (IIS Lockdown ToolD 删 除 应 用 程序 中 未 使 用 的 所 有 其 他 动态 内 
容 类 型 ,以 缩小 攻击 者 可 用 来 攻击 的 区 域 。 

(4) 确保 应 用 程序 使 用 低 权 限 的 ASP. NET 账户 运行 ASP. NET 代码 。 

(5) 将 ASP. NET 账户 添加 到 IIS 锁定 工具 创建 的 本 地 “Web 应 用 程序 组 ”, 以 防 进程 
运行 任何 未 得 到 授权 的 命令 行 可 执行 程序 。 

(6) 停 掉 默认 的 Web 网 站 ,新 建 一 个 网 站 作为 Web 应 用 程序 站 点 ,用 虚拟 目录 来 指定 
Web 访问 路 径 。 

(7) 配置 URLScan 2. 5, 使 其 只 允许 应 用 程序 中 使 用 的 扩展 集 ,并 阻止 较 长 的 请 求 
(URLScan 2.5 是 由 IIS 锁定 工具 安装 的 ,是 一 个 ISAPI 过 滤器 ,可 根据 查询 长 度 和 字符 集 
等 规则 监视 和 过 滤 发 送 到 IIS Web 服务 器 的 所 有 输入 请 求 ) 。 

(8) 设置 Web 内 容 目录 的 访问 权限 ,授予 ASP. NET 进程 对 内 容 文件 的 读 访 问 权限 ， 
授予 匿名 用 户 对 所 提供 内 容 的 适当 只 读 访 问 权 限 。 

(9) 限制 对 IIS 和 URLScan 的 日 志 目 录 的 访问 ,只 有 系统 账户 和 系统 管理 员 组 才 具 有 
访问 权限 。 

(10) 安装 防 病毒 软件 和 防 木 马 软件 等 ,启用 计算 机 的 防火 墙 功能 。 仅 留 必要 的 端 
口 


人 


(11) 创建 注册 表 项 :nolmhash、NoDefault Exempt、 Disable IPSource Routing 、Syn 
Attack Protect 来 提高 系统 安全 性 。 

@ 创建 注册 表 项 nolmhash。 

nolmhash 在 Windows XP 和 Windows Server 2003 中 ,这 是 一 个 值 。 

位 置 : HKLM\System\Current ControlSet\Control\LSA 

用 途 : 防止 操作 系统 以 LM 散 列 格式 存储 用 户 密码 。 此 格式 只 用 于 不 支持 NTLM 或 
Kerberos 的 Windows 3. 11 客户 端 。 创 建 和 保留 此 LM 散 列 的 风险 在 于 ,如 果 攻 击 者 设法 
将 以 此 格式 存储 的 密码 解密 ,就 可 以 在 网 络 上 的 其 他 计算 机 上 重复 利用 这 些 密码 。 

@ 创建 注册 表 值 NoDefault Exempt。 

位 置 HKLM\System\Current ControlSet\Services\IPSEC 

用 途 : 默认 情况 下 ,IPSec 将 允许 源 端 口 为 88 的 接 人 通信 查询 IPSec 服务 ,以 获取 连接 
到 计算 机 的 信息 ,而 不 管 使 用 的 是 哪 种 IPSec 策略 。 通 过 设置 此 值 , 可 实现 除了 我 们 设置 的 
IPSec 过 滤器 允许 的 通信 以 外 ,不 允许 端口 之 间 进 行 任何 通信 。 

@ 创建 注册 表 值 : Disable IPSource Routing。 

位 置 : HKLM\System\ CurrentControlSet\Services\ Tcpip \Parameters 

用 途 : 防止 TCP 数据 包 显 式 确定 到 最 终 目标 的 路 由 ,并 防止 它 要 求 服务 器 确定 最 佳 路 
由 。 这 是 一 个 防止 中间人 ”攻击 ( 即 攻击 者 通过 自己 的 服务 器 对 数据 包 进行 路 由 ,并 在 数据 
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包 传 递 期 间 窃 取 其 中 的 内 容 ) 的 保护 层 。 

@ 创建 注册 表 值 : Syn Attack Protect。 

位 置 : HKLM\System\Current ControlSet\Services\ Tcpip\ Parameters 

用 途 : 此 注册 表 项 通过 限制 分 配给 传人 请 求 的 资源 ,来 防止 操作 系统 受到 某 种 SYN- 
Flood 的 攻击 。 换 句 话说 ,这 将 帮助 阻止 在 客户 端 和 服务 器 之 间 试 图 使 用 SYN( 即 同步 ) 请 
求 以 达成 拒绝 服务 的 攻击 。 

(12) 通过 对 Web 访问 的 日 志 进行 审计 ,可 以 发 现 一 些 对 安全 方面 有 帮助 的 信息 。 


8.8.2 在 安装 SOL Server 的 服务 器 上 应 考虑 的 安全 问题 


(1) SQL Server 安装 在 NTFS 分 区 上 。 

(2) 为 数据 库 访 问 建立 蔡 代 账 号 ,并 为 蔡 代 账 号 设置 数据 库 访 问 角色 ,不 要 用 sa 账号 。 

(3) 安装 数据 库 系统 的 最 新 服务 包 。 

(4) 将 数据 库 系 统 设置 成 禁用 其 他 SQL Server 通过 RPC 远程 连接 。 

(5) 选择 低 权 限 本 地 账户 ,启动 SQL Server 服务 。 

(6) 停止 Distributed Transaction Coordinator(MSDTC ) 服务 ,并 将 其 设置 为 手动 
启动 。 
(7) 禁止 数据 库 服务 器 运行 COM 十 应 用 程序 。 

(8) 限制 所 支持 的 身份 验证 协议 的 级 别 (在 “控制 面板 ?| ”管理 工具 ”| * 本 地 安全 设置 ?| 
“安全 设置 "|* 本 地 策略 ”|* 安 全 选项 : LAN Manager 身份 验证 级 别 ” 中 进行 设置 ) 。 

(9) 禁用 应 用 程序 不 需要 的 SQL Server 代理 和 Microsoft 搜索 服务 。 

(10) 设置 Server Network 的 网 络 属性 ,由 “直接 客户 端 广播 ? 改 为 “隐藏 SQL Server”。 

(11) 如 应 用 程序 不 使 用 “命名 管道 ”协议 , 则 删除 之 。 

(12) 限制 数据 库 用 户 只 具有 用 得 到 的 数据 库 操作 权限 。 

(13) xp_cmdshell 是 扩展 存储 过 程 ,可 以 执行 操作 系统 级 命令 ,该 存储 过 程 的 功能 通过 
SQL Server 安装 目录 中 的 文件 C:\Program Files\Microsoft SQL Server\MSSQL\Binn\ 
xplog70. dll 获得 ,如 果 系 统 没 有 用 到 xp_cmdshell 扩展 存储 过 程 ,请 将 该 文件 换 名 或 删 
除 掉 。 

建议 使 用 “金山 漏洞 修复 "程序 进行 服务 器 的 漏洞 修复 。 


8.8.3 开发 Web 站 点 程序 应 考虑 的 安全 性 问题 


(1) 对 Web 应 用 系统 应 建立 基于 角色 的 用 户 权 限 管理 机 制 。 

(2) 使 用 参数 化 存储 过 程 。 使 用 参数 化 存储 过 程 是 指 在 Web 应 用 中 , 尽 可 能 将 对 数据 
库 的 操作 使 用 存储 过 程 来 完成 ,而 不 是 动态 构造 SQL 语句。 将 与 数据 库 的 交互 限制 到 存储 
过 程 ,这 通常 是 增强 Web 安全 的 一 个 最 佳 方案 。 如 果 不 存 在 存储 过 程 , 则 SQL 查询 必须 由 
Web 应 用 程序 动态 构造 。 如 果 Web 层 遭 到 破坏 ,攻击 者 就 可 以 向 数据 库 查 询 中 插入 恶意 
命令 ,从 而 检索 、 更 改 或 删除 数据 库 中 存储 的 数据 。 使 用 存储 过 程 , Web 应 用 程序 与 数据 库 
的 交互 操作 仅 限 于 通过 存储 过 程 发 送 的 几 个 特定 的 严格 类 型 参数 。 每 当 开 发 人 员 使 用 
.NET Framework 调用 存储 过 程 时 ,系统 都 会 对 发 送 到 此 存储 过 程 的 参数 进行 检查 ,以 确 
保 它们 是 存储 过 程 可 接受 的 类 型 (如 整数 、8 个 字符 的 字符 串 等 )。 这 是 Web 层 有 效 性 验证 
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上 的 又 一 个 保护 层 , 可 确保 所 有 输入 数据 格式 正确 , 且 不 能 自行 构造 为 可 操作 的 SQL 语句 。 

(3) 输入 有 效 性 验证 。 输 入 有 效 性 验证 即 是 对 所 有 用 户 输入 的 字符 范围 进行 限制 ,以 
防止 可 用 于 向 Web 站 点 发 送 恶 意 脚本 的 字符 ,并 禁止 使 用 它们 。 可 通过 ASP. NET 的 
System. Text，RegularExpressions. Regex 类 提供 的 功能 ,用 正则 表达 式 对 数据 进行 验证 ， 
例如 : 


Regex isNumber = new Regex("A[0 -9]+ $"); 
if(isNumber. Match( inputData) ) { 
// 使 用 它 


| 

else{ 

// 丢弃 它 
} 


正则 表达 式 是 用 于 匹配 文本 模式 的 字符 和 语法 元 素 集合 ,用 于 确保 查询 字符 串 是 正确 
且 无 恶意 的 。 它 可 以 进行 有 效 验 证 ,防止 用 户 在 输入 用 户 账 号 和 密码 的 时 候 ,输入 "or 1 二 1" 
等 ,从 而 防止 出 现 SQL 注入 攻击 。 

(4) 尽量 少 用 session 和 application 变量 ,切忌 不 要 通过 session 来 在 页 面 间 传递 大 数 
据 量 。 定 义 的 session 变量 如 果 不 用 ,用 session. remove 从 内 存 中 释放 掉 , 而 不 要 让 它 等 到 
超时 释放 。 因 为 对 于 每 个 用 户 都 要 为 session 开辟 存储 区 域 , 当 访问 用 户 量 大 的 时 候 , 服 务 
器 资源 会 很 快 耗 尽 。 

(5) 信息 加 密 存储 。 信 息 加 密 存储 是 指 对 如 数据 库 连接 字符 串 、 用 户 秘密 等 敏感 信息 
进行 加 密 存储 ,以 受 善 保护 数据 。 数 据 库 连 接 字符 串 存 放 有 包括 数据 库 服务 器 的 位 置 数据 
库 名称 和 用 户 名 以 及 密码 等 数据 库 连 接 信息 ,攻击 者 一 旦 设法 读 取 字 符 串 就 可 用 它 来 访问 
数据 库 并 对 数据 库 进行 恶意 破坏 。 通 常 我 们 可 以 采用 以 下 方法 保护 加 密 连 接 字 符 串 等 秘密 
信息 : 加 密 连 接 字符 串 ,将 其 存储 在 注册 表 中 ,并 使 用 访问 控制 列表 (ACL) 确 保 只 有 系统 管 
理 员 和 ASP. NET 辅助 进程 才能 访问 注册 表 项 。 通 过 使 用 . NET Framework 的 System. 
Security. Cryptography 类 中 的 TripleDES 类 提供 的 功能 可 实现 对 信息 的 加 密 。System. 
Security. Cryptography 加 密 算法 主要 分 为 : 散 列 算法 、 对 称 加 密 算法 、 非 对 称 加 密 算法 。 

(6) 窗 体 身份 验证 。 窗 体 身 份 验证 即 是 当 用 户 请 求 一 个 安全 页 面 时 ,系统 要 对 其 进行 
判断 ,如 果 该 用 户 已 经 登录 系统 并 尚未 超时 ,系统 将 返回 此 页 面 给 请 求 用 户 ; 反之 如 该 用 户 
尚未 登录 ,系统 就 要 将 此 用 户 重 定向 到 登录 页 面 。 

以 上 所 述 功 能 的 实现 只 需 对 Web. config 文件 进行 如 下 配置 即 可 。 


<authentication mode = "Forms"> 
< forms name = "userInfo" loginUrl = "login.aspx" protection = "R11"> 
</forms > 

</authentication> 

< authorization> 
< deny users = "?"/> 

</authorization> 
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其 中 二 authentication mode 王 "Forms" 二 用 于 身份 验证 。 身 份 验证 是 在 许可 用 户 /应 用 程序 
访问 某 个 资源 之 前 验证 客户 端 应 用 程序 身份 的 过 程 。 其 中 mode 有 Forms、Passport、 
Windows、None 共 4 种 选择 。 近 forms 二 二 /forms 二 节 中 的 name 设置 的 是 存储 在 客户 端 
的 cookie 的 名 称 ,loginUrl 设置 的 是 用 户 没 有 登录 重 定向 的 页 面 ,protection 设置 的 是 保护 
措施 ,有 All、None、Encryption、Validation 共 4 个 选项 。All 选项 设置 执行 验证 和 加 密 操 作 
来 保护 cookie; None 选项 对 cookie 禁止 加 密 和 验证 ; Encryption 选项 对 cookie 进行 加 密 
但 不 验证 ; Validation 选项 对 cookie 验证 但 不 加 密 。 

二 authorization 记 节 表 示 在 用 户 通 过 身份 验证 后 ,基于 身份 对 该 用 户 授予 访问 权限 的 
过 程 。 过 deny 一 节 中 的 users 设置 的 是 禁止 的 用 户 ,“?” 代 表 禁 止 匿名 登录 ,“ * ”代表 全 体 
用 户 。 与 二 deny 二 相对 应 的 节 还 有 二 allow users 二 。 在 登录 页 面 中 添加 如 下 代码 


下 (与 数据 库 的 用 户 名 密码 字段 比较 判断 用 户 是 否 合法 ) 
{ System, Web. Security. FormsRuthentication. RedirectFromLoginPage(this. 
TextBoxl. Text, false); 

} 


else{ 
Response, Write(" 身 份 不 合法 !"); 
} 


对 进行 身份 验证 的 登录 页 本 身 , 应 该 采取 两 步 方 式 验 证 用 户 存 在 且 密 码 正 确 , 且 不 可 为 
图 简便 而 使 用 一 条 SQL 语句 进行 验证 (如 果 攻 击 者 攻破 Web 站 点 ,并 将 SQL 语句 的 where 
子 句 末尾 加 上 一 段 永远 为 真 的 判断 语句 , 则 无 论 何 时 他 都 可 以 通过 身份 验证 ,这 种 攻击 称 为 
注入 式 攻 击 )。 存 在 安全 隐患 的 身份 验证 语句 是 : select * from users where name 一 
namestr and password 王 passwdstr。 比 较 安 全 的 用 户 身份 验证 应 该 是 : 判断 用 户 是 否 存 
在 用 “select name,password from users where name 二 namestr”。 如 用 户 存在 ,将 返回 一 
条 包括 用 户 名 和 密码 的 记录 ,然后 判断 由 数据 库 返 回 的 密码 和 用 户 输入 的 密码 值 : 


if password = passwdstr { 
// 通 过 验证 后 的 程序 代码 


}else{ 
// 未 通过 验证 后 的 程序 代码 


为 加 强 用 户 名 、 密 码 等 这 些 敏 感 信息 在 公 网 上 的 安全 传输 ,应 通过 安全 套 接 字 层 加 密 后 
回 给 Web 服务 器 (例如 使 用 MD5、SHA1 对 敏感 信息 进行 加 密 ) 。 

(7) 通过 在 用 户 登 录 窗 口中 设置 输入 验证 码 的 方法 ,可 以 防止 非法 用 户 以 程序 自动 处 
理 方式 推测 用 户 登 录 账户 和 密码 ,从 而 提高 系统 的 安全 性 。 验 证 码 就 是 将 一 串 随机 产生 的 
数字 或 符号 ,生成 一 幅 图 片 ,图 片 里 加 上 一 些 干扰 像素 ,由 用 户 肉 眼 识别 其 中 的 验证 码 信息 ， 
输入 表单 后 提交 网 站 进行 登录 验证 。 

(8) 在 用 户 登录 输入 密码 的 时 候 , 为 防止 木马 程序 非法 录制 按键 操作 ,可 利用 自 定 义 软 
键盘 让 用 户 只 能 通过 单 击 鼠标 输入 密码 ,这 是 目前 很 多 银行 网 站 采用 的 一 种 安全 登录 方式 。 


下 
局 
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以 上 所 介绍 的 是 提高 Web 站 点 安全 性 的 一 般 性 方法 ,需要 Web 开发 者 根据 应 用 系统 
的 安全 程度 很 好 地 规划 和 设计 。 


思考 练习 题 


1. 设计 和 开发 一 个 Web 站 点 需要 注意 哪些 问题 ? 
2. 建设 一 个 Web 站 点 的 一 般 步 又 是 什么 ? 
3. 进行 网 站 开发 时 ,应 该 从 哪些 方面 来 提高 网 站 性 能 和 安全 性 ? 
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